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..
Tag:css3,html,php,pdo,free icons,how to make ,icons ,html5,free plugins,social media icon free,css code,
1st
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
2nd
<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
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 :)
Comments
Post a comment