Pure CSS icons with no images

Create social icons using FontAwesome and no images!

For a complete list of Icons you can use, go to Font Awesome Icons

HTML

Link to Font Awesome
[code language=”html”]
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
[/code]

Add your Html for your icons
[code language=”html”]
<div class="socialIcons">
<ul>
<li><a href="#" class="fb"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="google"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" class="pinterest"><i class="fa fa-pinterest-square"></i></a></li>
<li><a href="#" class="youtube"><i class="fa fa-youtube"></i></a></li>
</ul>
</div>
[/code]

CSS

[code language=”css”]
.socialIcons {
font-size: 24px;
}
.socialIcons li {
display: inline-block;
float: left;
text-align: center;
line-height: 40px;
}
.socialIcons li a {
color: #000;
display: block;
width: 40px;
height: 40px;
}
.socialIcons li a:hover {
color: #fff;
}
.socialIcons li a.fb:hover {
background: #3c599f;
}
.socialIcons li a.twitter:hover {
background: #00aced;
}
.socialIcons li a.google:hover {
background: #d85131;
}
.socialIcons li a.linkedin:hover {
background: #017eb4;
}
.socialIcons li a.pinterest:hover {
background: #d20003;
}
.socialIcons li a.youtube:hover {
background: #c8312b;
}
[/code]