GitHub WARNING: This is a mirror repo from GitLab. Please, send your MRs there. Issues can still be opened here and are welcome.
You are probably tired of seeing this everywhere
*How about this instead?
*inspired by FSFE buttons
Make your visitors wonder what those icons represent.
Help promoting federated, privacy-friendly networks.
These are social buttons for your personal blog, profile. They can be added to any page, including static websites.
The collection of buttons is basically a set of SVGs and some styles.
Copy styles.min.css and share.min.js into your project directory. You will also find unminified versions in public folder.
Note: Only sharing buttons require the script. If you intend to use connect or support buttons, add just the styles file.
Include styles.min.css with a <link> tag in the <head> of your page, and share.min.js with a <script> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<title>...</title>
<link rel="stylesheet" href="styles.min.css">
</head>
<body>
<!-- buttons go here -->
<script src="share.min.js"></script>
</body>
</html>Include icons that you plan to use as <symbol> in <head>. You'll find all available SVGs in example page code. This way of using SVGs provides easy manipulation.
<!-- ... -->
<head>
<link rel="stylesheet" href="styles.min.css">
<svg xmlns="https://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon-friendica" viewBox="0 0 24 24">
<path d="M7.525 23.347c-.847-.005-2.535-.86-2.908-3.15-.035-.216 0-15.89 0-15.89S5.2 1.086 8.01.65h11.433v6.37h-7.267v5.087h7.267v4.796h-7.267v6.445s-4.65-.002-4.65 0z"/>
</symbol>
</svg>
</head>
<!-- ... -->Now add buttons referencing SVGs in <use> tag, like so:
<a href="https://yourfriendicalink.wow" class="dex-btn wo-text circle friendica" title="Connect on Friendica" target="_blank" rel="external noopener">
<svg role="img" class="dex-icon" width="16" height="16">
<use xlink:href="#icon-friendica"></use>
</svg>
</a>Note: Don't forget to replace demo
hrefURL with your link.
Sharing buttons are a bit more complex. They require a script mentioned above and an overlay input.
<input name="popup" id="overlay" class="overlay" type="radio">
<div class="share">
<label class="dex-btn rounded wo-text mastodon" title="Share this page on Mastodon" for="mastodon-share">
<svg role="img" class="dex-icon" width="16" height="16">
<use xlink:href="#icon-mastodon"></use>
</svg>
</label>
<input name="popup" id="mastodon-share" class="hidden" type="radio">
<span class="popup">
<label for="overlay"></label>
<input name="podurl" value="" placeholder="Mastodon URL (witches.town)" type="text"><button class="share-btn" type="submit" value="mastodon">OK</button>
</span>
</div>Following utility classes are provided to change button styling.
-
.rounded- rounded corners -
.oval- more rounded corners -
.circle- circle icon -
.wo-text- fixed width (34px by default) for buttons without text
For more examples see demo page.
Some websites using these buttons: To include yours, please, add a link below and open a pull request in the main GitLab repo
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent