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


Link to Font Awesome

<link href="//" rel="stylesheet">

Add your Html for your icons

<div class="socialIcons">
    <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>


.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 {
  background: #d85131;
.socialIcons li a.linkedin:hover {
 background: #017eb4; 
.socialIcons li a.pinterest:hover {
 background: #d20003; 
.socialIcons li {
 background: #c8312b; 

Tags: , ,

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