Awesome Social Media Icon with Css3

Assalam o Aliakum friends in this post I just want to share this Awesome Social media Icon with you hope you like it.
I made this from FontAwesome github icon "thanks to them"

FontAwesome it acts like font most of people didn't know how to work with it FontAwesome is easy to use and very useful for design new stuff you can check https://fortawesome.github.io website and get some idea and chose icon what you want to add


check it out here..

Demo Download

Tag:css3,html,php,pdo,free icons,how to make ,icons ,html5,free plugins,social media icon free,css code,

1st

first copy below Css stylesheet  link and paste in to your html head section.

 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>

2nd 

 Html code here

<div class="social rect">
 <h1>RECTANGLE Icons</h1>
 <ul> 
  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
  <li><a href="#"><i class="fa fa-twitter"></i></a></li>
  <li><a href="#"><i class="fa fa-youtube"></i></a></li>
  <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
  <li><a href="#"><i class="fa fa-reddit"></i></a></li>
  <li><a href="#"><i class="fa fa-git"></i></a></li>
  <li><a href="#"><i class="fa fa-drupal"></i></a></li>
  <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
 </ul>
</div>

<div class="social round">
 <h1>Round Icons</h1>
 <ul> 
  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
  <li><a href="#"><i class="fa fa-twitter"></i></a></li>
  <li><a href="#"><i class="fa fa-youtube"></i></a></li>
  <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
  <li><a href="#"><i class="fa fa-reddit"></i></a></li>
  <li><a href="#"><i class="fa fa-git"></i></a></li>
  <li><a href="#"><i class="fa fa-drupal"></i></a></li>
  <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
 </ul>
</div>

<div class="social circle">
 <h1>Circle Icons</h1>
 <ul> 
  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
  <li><a href="#"><i class="fa fa-twitter"></i></a></li>
  <li><a href="#"><i class="fa fa-youtube"></i></a></li>
  <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
  <li><a href="#"><i class="fa fa-reddit"></i></a></li>
  <li><a href="#"><i class="fa fa-git"></i></a></li>
  <li><a href="#"><i class="fa fa-drupal"></i></a></li>
  <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
 </ul>
</div>

3rd 

Css Code here

h1{
 text-align:center;
 border-bottom:1px solid #ccc;
 color:#5F5D5D;
}
.social{margin:50px 0px;}

.social ul {list-style:none; text-align:center;}

.social ul  li {
 display:inline;
 margin:0px 10px;
 
}

.social  ul .fa{
 color:#fff;
 width:100px;
 height:100px;
 color:rgba(244,244,244,0.7);
 font-size:50px;
 font-family:FontAwesome;
 line-height:100px;
 transition: all 0.2s ease-in;
}

.social.round .fa{
 border-radius:15px;
}
.social.circle .fa{
 border-radius:50%;
}
.social ul .fa:hover,.social ul .fa:active{
 color:#fff;
 box-shadow:1px 1px 3px black;
}
.social  .fa-facebook{
 background:#3b5998;
}

.social  .fa-twitter{
 background:#55acee;
}

.social  .fa-youtube{
 background:#cc181e;
}
.social  .fa-reddit{
 background:#cee3f8;
}
.social  .fa-google-plus{
 background:#d34836;
}

.social  .fa-git{
 background:black;
}

.social  .fa-drupal{
 background:#0c76ab;
}

.social  .fa-linkedin{
 background:#007bb6;
 background:#0c76ab;
}

Enjoy :)