Skip to content

Instantly share code, notes, and snippets.

@evalica

evalica/Social-Font-Awesome.markdown

Last active August 29, 2015 14:10
Show Gist options
  • Save evalica/8ec9db6f3c61c46a81a1 to your computer and use it in GitHub Desktop.
Save evalica/8ec9db6f3c61c46a81a1 to your computer and use it in GitHub Desktop.
Download ZIP
Social Font-Awesome
Raw
index.html
<link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
<div class="navigation">
<ul>
<li>
<a class="dribbble" href="#">
<i class="fa fa-dribbble"></i>
</a>
</li>
<li>
<a class="flickr" href="#">
<i class="fa fa-flickr"></i>
</a>
</li>
<li>
<a class="wordpress" href="#">
<i class="fa fa-wordpress"></i>
</a>
</li>
<li>
<a class="instagram" href="#">
<i class="fa fa-instagram"></i>
</a>
</li>
<li>
<a class="vine" href="#">
<i class="fa fa-vine"></i>
</a>
</li>
<li>
<a class="foursquare" href="#">
<i class="fa fa-foursquare"></i>
</a>
</li>
<li>
<a class="slideshare" href="#">
<i class="fa fa-slideshare"></i>
</a>
</li>
<li>
<a class="stackoverflow" href="#">
<i class="fa fa-stack-overflow"></i>
</a>
</li>
<li>
<a class="skype" href="#">
<i class="fa fa-skype"></i>
</a>
</li>
<li>
<a class="jsfiddle" href="#">
<i class="fa fa-jsfiddle"></i>
</a>
</li>
<li>
<a class="codepen" href="#">
<i class="fa fa-codepen"></i>
</a>
</li>
<li>
<a class="delicious" href="#">
<i class="fa fa-delicious"></i>
</a>
</li>
<li>
<a class="rss" href="#">
<i class="fa fa-rss"></i>
</a>
</li>
</ul>
</div>
<div class="navigation">
<ul>
<li>
<a class="twitter" href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a class="twitter" href="#">
<i class="fa fa-twitter-square"></i>
</a>
</li>
</ul>
</div>
<div class="navigation">
<ul>
<li>
<a class="linkedin" href="#">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li>
<a class="linkedin" href="#">
<i class="fa fa-linkedin-square"></i>
</a>
</li>
</ul>
</div>
<div class="navigation">
<ul>
<li>
<a class="git" href="#">
<i class="fa fa-git"></i>
</a>
</li>
<li>
<a class="git" href="#">
<i class="fa fa-git-square"></i>
</a>
</li>
<li>
<a class="git" href="#">
<i class="fa fa-github"></i>
</a>
</li>
<li>
<a class="git" href="#">
<i class="fa fa-github-square"></i>
</a>
</li>
<li>
<a class="git" href="#">
<i class="fa fa-github-alt"></i>
</a>
</li>
</ul>
</div>
<div class="navigation">
<ul>
<li>
<a class="behance" href="#">
<i class="fa fa-behance"></i>
</a>
</li>
<li>
<a class="behance" href="#">
<i class="fa fa-behance-square"></i>
</a>
</li>
</ul>
</div>
<div class="navigation">
<ul>
<li>
<a class="steam" href="#">
<i class="fa fa-steam"></i>
</a>
</li>
<li>
<a class="steam" href="#">
<i class="fa fa-steam-square"></i>
</a>
</li>
</ul>
</div>
<div class="navigation">
<ul>
<li>
<a class="youtube" href="#">
<i class="fa fa-youtube"></i>
</a>
</li>
<li>
<a class="youtube" href="#">
<i class="fa fa-youtube-square"></i>
</a>
</li>
<li>
<a class="youtube" href="#">
<i class="fa fa-youtube-play"></i>
</a>
</li>
</ul>
</div>
<div class="navigation">
<ul>
<li>
<a class="facebook" href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a class="facebook" href="#">
<i class="fa fa-facebook-square"></i>
</a>
</li>
</ul>
</div>
<div class="navigation">
<ul>
<li>
<a class="googleplus" href="#">
<i class="fa fa-google-plus"></i>
</a>
</li>
<li>
<a class="googleplus" href="#">
<i class="fa fa-google-plus-square"></i>
</a>
</li>
</ul>
</div>
<div class="navigation">
<ul>
<li>
<a class="pinterest" href="#">
<i class="fa fa-pinterest"></i>
</a>
</li>
<li>
<a class="pinterest" href="#">
<i class="fa fa-pinterest-square"></i>
</a>
</li>
</ul>
</div>
<div class="navigation">
<ul>
<li>
<a class="tumblr" href="#">
<i class="fa fa-tumblr"></i>
</a>
</li>
<li>
<a class="tumblr" href="#">
<i class="fa fa-tumblr-square"></i>
</a>
</li>
</ul>
</div>
<div class="navigation">
<ul>
<li>
<a class="mail" href="#">
<i class="fa fa-envelope"></i>
</a>
</li>
<li>
<a class="mail" href="#">
<i class="fa fa-envelope-o"></i>
</a>
</li>
<li>
<a class="mail" href="#">
<i class="fa fa-envelope-square"></i>
</a>
</li>
</ul>
</div>
Raw
Social-Font-Awesome.markdown
Raw
style.less
@navigation-bg-color: #7BD4DB;
@navigation-text-color: #fff;
.navigation {
background-color: @navigation-bg-color;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 -1px 0 rgba(0, 0, 0, 0.1) inset;
height: 43px;
margin-bottom: 1em;
ul {
list-style-type: none;
margin: 0;
padding: 0;
li {
float: left;
margin: 0;
a {
color: @navigation-text-color;
display: inline-block;
font-size: 1.5em;
margin: 0;
min-width: 40px;
padding: 7px 10px;
text-align: center;
transition: all 0.25s ease 0s;
animation-duration: 1s;
animation-fill-mode: both;
animation-name: fadeIn;
animation-delay: 0.6s;
}
}
}
/* fa-twitter fa-twitter-square */
.twitter:hover {
background-color: #00aced;
}
/* fa-linkedin fa-linkedin-square */
.linkedin:hover {
background-color: #007bb6;
}
/* fa-git fa-git-square fa-github fa-github-square fa-github-alt */
.git:hover {
background-color: #444444;
}
/* fa-behance fa-behance-square */
.behance:hover {
background-color: #131418;
}
/* fa-steam fa-steam-square */
.steam:hover {
background-color: #144578;
}
/* fa-youtube fa-youtube-square fa-youtube-play */
.youtube:hover {
background-color: #bb0000;
}
/* fa-facebook fa-facebook-square */
.facebook:hover {
background-color: #3b5998;
}
/* fa-google-plus fa-google-plus-square */
.googleplus:hover {
background-color: #dd4b39;
}
/* fa-pinterest fa-pinterest-square */
.pinterest:hover {
background-color: #cb2027;
}
/* fa-tumblr fa-tumblr-square */
.tumblr:hover {
background-color: #32506d;
}
/* fa-envelope fa-envelope-o fa-envelope-square */
.mail:hover {
background-color: #000;
}
/* fa-dribbble */
.dribbble:hover {
background-color: #f26798;
}
/* fa-flickr */
.flickr:hover {
background-color: #ff0084;
}
/* fa-wordpress */
.wordpress:hover {
background-color: #4597be;
}
/* fa-instagram */
.instagram:hover {
background-color: #517fa4;
}
/* fa-vine */
.vine:hover {
background-color: #00b48a;
}
/* fa-foursquare */
.foursquare:hover {
background-color: #0072b1;
}
/* fa-slideshare */
.slideshare:hover {
background-color: #00A8A8;
}
/* fa-stack-overflow */
.stackoverflow:hover {
background-color: #FF9900;
}
/* fa-skype */
.skype:hover {
background-color: #009EE5;
}
/* fa-jsfiddle */
.jsfiddle:hover {
background-color: #4679BD;
}
/* fa-codepen */
.codepen:hover {
background-color: #1B1B1B;
}
/* fa-delicious */
.delicious:hover {
background-color: #0B79E5;
}
/* fa-rss */
.rss:hover {
background-color: #ef922f;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment