SVG Share Buttons using text-align: justify

dabblet.css

/** 
 * SVG Share Buttons using text-align: justify
 */

.three-share-btns {
margin:100px auto; /*just so it shows up*/
width: 118px; /*defines pretty much everything*/
height: 22px; /*works best in this case when this is predefined*/
}

.justify-block {
text-align: justify;
text-justify: distribute-all-lines; /*IE hack*/
justify-content: space-between;/*firefoxhack*/
font-size: 0;/*why this would be annoying for a true grid. Also should be scoped to be font-size:0.1px for IE9*/
}

.justify-block:after {
content: ''; /*clearfix-like hack necessary to make it all work*/
width: 100%;
display: inline-block;
vertical-align: top;
}
.round-icon {
height: 22px;
width: 22px;
display: inline-block; /*display:inline; zoom:1; for IE7*/
background-color: #81959e;
background-position: 50% 50%;
-webkit-border-radius: 22px;
border-radius: 22px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
vertical-align: top;
}
.round-icon:hover {
background-color: #0d3f54;
}
/*svg icons*/
.icon-fb-logo, .icon-fb { background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220%22%20y%3D%220px%22%20width%3D%2217px%22%20height%3D%2217px%22%20viewBox%3D%220%200%2017%2016%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M9.035%2C15V8.412h2.211l0.33-2.566H9.035v-1.64c0-0.743%2C0.205-1.25%2C1.271-1.25h1.359V0.659%20c-0.234-0.031-1.04-0.101-1.979-0.101c-1.961%2C0-3.303%2C1.196-3.303%2C3.393v1.894H4.167v2.566h2.217V15H9.035z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat;  }

.icon-rss { background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20id%3D%22RSSicon%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%2222%2019%2086%2095%22%20xml%3Aspace%3D%22preserve%22%3E%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%2234%22%20cy%3D%2294.5%22%20r%3D%2212%22%2F%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M80%2C106.5H63c0-22.644-18.356-41-41-41l0%2C0v-17C54.033%2C48.5%2C80%2C74.467%2C80%2C106.5z%22%2F%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M92%2C106.5c0-38.66-31.34-70-70-70V19c48.324%2C0%2C87.5%2C39.175%2C87.5%2C87.5H92z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; }

.icon-twitter, .icon-tw { background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%20200%20162.536%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M200%2C19.24c-7.358%2C3.264-15.267%2C5.469-23.566%2C6.461c8.471-5.078%2C14.978-13.119%2C18.041-22.701%20c-7.929%2C4.703-16.71%2C8.117-26.057%2C9.957C160.934%2C4.982%2C150.27%2C0%2C138.468%2C0c-22.66%2C0-41.033%2C18.371-41.033%2C41.031%20c0%2C3.216%2C0.363%2C6.348%2C1.062%2C9.351C64.396%2C48.671%2C34.161%2C32.335%2C13.924%2C7.51c-3.532%2C6.06-5.556%2C13.108-5.556%2C20.628%20c0%2C14.236%2C7.244%2C26.795%2C18.254%2C34.153c-6.726-0.213-13.053-2.059-18.585-5.132c-0.004%2C0.171-0.004%2C0.343-0.004%2C0.516%20c0%2C19.88%2C14.144%2C36.464%2C32.915%2C40.234c-3.443%2C0.938-7.068%2C1.439-10.81%2C1.439c-2.644%2C0-5.214-0.258-7.72-0.736%20c5.222%2C16.301%2C20.375%2C28.165%2C38.331%2C28.495c-14.043%2C11.006-31.735%2C17.565-50.96%2C17.565c-3.312%2C0-6.578-0.194-9.788-0.574%20c18.159%2C11.643%2C39.727%2C18.437%2C62.899%2C18.437c75.473%2C0%2C116.746-62.524%2C116.746-116.747c0-1.779-0.04-3.548-0.119-5.309%20C187.543%2C34.695%2C194.499%2C27.469%2C200%2C19.24z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; }

dabblet.html

<div class="three-share-btns justify-block fr">
<a href="#" class="round-icon icon-fb"></a>  
<a href="#" class="round-icon icon-tw"></a>  
<a href="#" class="round-icon icon-rss"></a> 
</div>
<!-- content to be placed inside <body>…</body> -->

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}