429 lines
34 KiB
HTML
429 lines
34 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>social-logos</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
margin:0;
|
||
|
|
padding:10px 20px;
|
||
|
|
background:#fff;
|
||
|
|
color:#222;
|
||
|
|
}
|
||
|
|
h1, div, footer {
|
||
|
|
font-family:"Helvetica Neue", Arial, sans-serif;
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
margin:0 0 20px;
|
||
|
|
font-size:32px;
|
||
|
|
font-weight:normal;
|
||
|
|
}
|
||
|
|
.icons {
|
||
|
|
margin-bottom:40px;
|
||
|
|
-webkit-column-count:5;
|
||
|
|
-moz-column-count:5;
|
||
|
|
column-count:5;
|
||
|
|
-webkit-column-gap:20px;
|
||
|
|
-moz-column-gap:20px;
|
||
|
|
column-gap:20px;
|
||
|
|
}
|
||
|
|
.icons__item,
|
||
|
|
.icons__item i {
|
||
|
|
line-height:2em;
|
||
|
|
cursor:pointer;
|
||
|
|
overflow:hidden;
|
||
|
|
}
|
||
|
|
.icons__item:hover {
|
||
|
|
color:#3c90be;
|
||
|
|
}
|
||
|
|
.icons__item i {
|
||
|
|
display:inline-block;
|
||
|
|
width:32px;
|
||
|
|
text-align:center;
|
||
|
|
}
|
||
|
|
.icons__item:hover i {
|
||
|
|
-webkit-transform:scale(1.5);
|
||
|
|
transform:scale(1.5);
|
||
|
|
}
|
||
|
|
footer {
|
||
|
|
margin-top:40px;
|
||
|
|
font-size:14px;
|
||
|
|
color:#999;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Generated by grunt-webfont */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family:"social-logos";
|
||
|
|
src:url("social-logos.eot?51b607ee5b5cb2a0e4517176475a424c");
|
||
|
|
font-weight:normal;
|
||
|
|
font-style:normal;
|
||
|
|
}
|
||
|
|
@font-face {
|
||
|
|
font-family:"social-logos";
|
||
|
|
src:url("social-logos.eot?51b607ee5b5cb2a0e4517176475a424c");
|
||
|
|
src:url("social-logos.eot?#iefix") format("embedded-opentype"),
|
||
|
|
url("data:application/x-font-woff;charset=utf-8;base64,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
|
||
|
|
url("social-logos.ttf?51b607ee5b5cb2a0e4517176475a424c") format("truetype");
|
||
|
|
font-weight:normal;
|
||
|
|
font-style:normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
.social-logo {
|
||
|
|
font-family:"social-logos";
|
||
|
|
display:inline-block;
|
||
|
|
vertical-align:middle;
|
||
|
|
line-height:1;
|
||
|
|
font-weight:normal;
|
||
|
|
font-style:normal;
|
||
|
|
speak:none;
|
||
|
|
text-decoration:inherit;
|
||
|
|
text-transform:none;
|
||
|
|
text-rendering:auto;
|
||
|
|
-webkit-font-smoothing:antialiased;
|
||
|
|
-moz-osx-font-smoothing:grayscale;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* Icons */
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__amazon:before {
|
||
|
|
content:"\f600";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__behance:before {
|
||
|
|
content:"\f101";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__blogger-alt:before {
|
||
|
|
content:"\f601";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__blogger:before {
|
||
|
|
content:"\f602";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__codepen:before {
|
||
|
|
content:"\f216";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__dribbble:before {
|
||
|
|
content:"\f201";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__dropbox:before {
|
||
|
|
content:"\f225";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__eventbrite:before {
|
||
|
|
content:"\f603";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__facebook:before {
|
||
|
|
content:"\f203";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__feed:before {
|
||
|
|
content:"\f413";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__flickr:before {
|
||
|
|
content:"\f211";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__foursquare:before {
|
||
|
|
content:"\f226";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__ghost:before {
|
||
|
|
content:"\f61c";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__github:before {
|
||
|
|
content:"\f200";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__google-plus-alt:before {
|
||
|
|
content:"\f218";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__google-plus:before {
|
||
|
|
content:"\f206";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__instagram:before {
|
||
|
|
content:"\f215";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__linkedin:before {
|
||
|
|
content:"\f207";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__mail:before {
|
||
|
|
content:"\f410";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__medium:before {
|
||
|
|
content:"\f623";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__path-alt:before {
|
||
|
|
content:"\f604";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__path:before {
|
||
|
|
content:"\f219";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__pinterest-alt:before {
|
||
|
|
content:"\f210";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__pinterest:before {
|
||
|
|
content:"\f209";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__pocket:before {
|
||
|
|
content:"\f224";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__polldaddy:before {
|
||
|
|
content:"\f217";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__print:before {
|
||
|
|
content:"\f469";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__reddit:before {
|
||
|
|
content:"\f222";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__share:before {
|
||
|
|
content:"\f415";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__skype:before {
|
||
|
|
content:"\f220";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__spotify:before {
|
||
|
|
content:"\f515";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__squarespace:before {
|
||
|
|
content:"\f605";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__stumbleupon:before {
|
||
|
|
content:"\f223";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__telegram:before {
|
||
|
|
content:"\f606";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__tumblr-alt:before {
|
||
|
|
content:"\f607";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__tumblr:before {
|
||
|
|
content:"\f214";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__twitch:before {
|
||
|
|
content:"\f516";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__twitter-alt:before {
|
||
|
|
content:"\f202";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__twitter:before {
|
||
|
|
content:"\f610";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__vimeo:before {
|
||
|
|
content:"\f212";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__whatsapp:before {
|
||
|
|
content:"\f608";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__wordpress:before {
|
||
|
|
content:"\f205";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__xanga:before {
|
||
|
|
content:"\f609";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.social-logo__youtube:before {
|
||
|
|
content:"\f213";
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>social-logos</h1>
|
||
|
|
|
||
|
|
<div class="icons" id="icons">
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="amazon"><i class="social-logo social-logo__amazon"></i> social-logo__amazon</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="behance"><i class="social-logo social-logo__behance"></i> social-logo__behance</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="blogger-alt"><i class="social-logo social-logo__blogger-alt"></i> social-logo__blogger-alt</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="blogger"><i class="social-logo social-logo__blogger"></i> social-logo__blogger</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="codepen"><i class="social-logo social-logo__codepen"></i> social-logo__codepen</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="dribbble"><i class="social-logo social-logo__dribbble"></i> social-logo__dribbble</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="dropbox"><i class="social-logo social-logo__dropbox"></i> social-logo__dropbox</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="eventbrite"><i class="social-logo social-logo__eventbrite"></i> social-logo__eventbrite</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="facebook"><i class="social-logo social-logo__facebook"></i> social-logo__facebook</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="feed"><i class="social-logo social-logo__feed"></i> social-logo__feed</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="flickr"><i class="social-logo social-logo__flickr"></i> social-logo__flickr</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="foursquare"><i class="social-logo social-logo__foursquare"></i> social-logo__foursquare</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="ghost"><i class="social-logo social-logo__ghost"></i> social-logo__ghost</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="github"><i class="social-logo social-logo__github"></i> social-logo__github</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="google-plus-alt"><i class="social-logo social-logo__google-plus-alt"></i> social-logo__google-plus-alt</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="google-plus"><i class="social-logo social-logo__google-plus"></i> social-logo__google-plus</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="instagram"><i class="social-logo social-logo__instagram"></i> social-logo__instagram</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="linkedin"><i class="social-logo social-logo__linkedin"></i> social-logo__linkedin</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="mail"><i class="social-logo social-logo__mail"></i> social-logo__mail</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="medium"><i class="social-logo social-logo__medium"></i> social-logo__medium</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="path-alt"><i class="social-logo social-logo__path-alt"></i> social-logo__path-alt</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="path"><i class="social-logo social-logo__path"></i> social-logo__path</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="pinterest-alt"><i class="social-logo social-logo__pinterest-alt"></i> social-logo__pinterest-alt</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="pinterest"><i class="social-logo social-logo__pinterest"></i> social-logo__pinterest</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="pocket"><i class="social-logo social-logo__pocket"></i> social-logo__pocket</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="polldaddy"><i class="social-logo social-logo__polldaddy"></i> social-logo__polldaddy</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="print"><i class="social-logo social-logo__print"></i> social-logo__print</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="reddit"><i class="social-logo social-logo__reddit"></i> social-logo__reddit</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="share"><i class="social-logo social-logo__share"></i> social-logo__share</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="skype"><i class="social-logo social-logo__skype"></i> social-logo__skype</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="spotify"><i class="social-logo social-logo__spotify"></i> social-logo__spotify</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="squarespace"><i class="social-logo social-logo__squarespace"></i> social-logo__squarespace</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="stumbleupon"><i class="social-logo social-logo__stumbleupon"></i> social-logo__stumbleupon</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="telegram"><i class="social-logo social-logo__telegram"></i> social-logo__telegram</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="tumblr-alt"><i class="social-logo social-logo__tumblr-alt"></i> social-logo__tumblr-alt</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="tumblr"><i class="social-logo social-logo__tumblr"></i> social-logo__tumblr</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="twitch"><i class="social-logo social-logo__twitch"></i> social-logo__twitch</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="twitter-alt"><i class="social-logo social-logo__twitter-alt"></i> social-logo__twitter-alt</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="twitter"><i class="social-logo social-logo__twitter"></i> social-logo__twitter</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="vimeo"><i class="social-logo social-logo__vimeo"></i> social-logo__vimeo</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="whatsapp"><i class="social-logo social-logo__whatsapp"></i> social-logo__whatsapp</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="wordpress"><i class="social-logo social-logo__wordpress"></i> social-logo__wordpress</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="xanga"><i class="social-logo social-logo__xanga"></i> social-logo__xanga</div>
|
||
|
|
|
||
|
|
<div class="icons__item" data-name="youtube"><i class="social-logo social-logo__youtube"></i> social-logo__youtube</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<h1>Usage</h1>
|
||
|
|
<pre><code><i class="social-logo social-logo__<span id="name">name</span>"></i></code></pre>
|
||
|
|
|
||
|
|
|
||
|
|
<footer>Generated by <a href="https://github.com/sapegin/grunt-webfont">grunt-webfont</a>.</footer>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
(function() {
|
||
|
|
document.getElementById('icons').onclick = function(e) {
|
||
|
|
e = e || window.event;
|
||
|
|
var name = e.target.getAttribute('data-name') || e.target.parentNode.getAttribute('data-name');
|
||
|
|
document.getElementById('name').innerHTML = name;
|
||
|
|
|
||
|
|
}
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|