Create Pure CSS Social Icons with no Images


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
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
Add your Html for your icons
<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>

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; 
}

Tags: , ,

The best way to say you like this article is to comment