Social Icon

Use the below code to display Social icon:

<div class="social-icons [ social-icon Style ]">
  <ul>
    <li class="social-rss"><a href="#"><i class="fa fa-rss"></i></a></li>
    <li class="social-facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
    <li class="social-twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
    <li class="social-vimeo"><a href="#"><i class="fa fa-vimeo"></i></a></li>
    <li class="social-youtube"><a href="#"><i class="fa fa-youtube"></i></a></li>
    <li class="social-instagram"><a href="#"><i class="fa fa-instagram"></i></a></li>
    <li class="social-stumbleupon"><a href="#"><i class="fa fa-stumbleupon"></i></a></li>
    <li class="social-lastfm"><a href="#"><i class="fa fa-lastfm"></i></a></li>
    <li class="social-pinterest"><a href="#"><i class="fa fa-pinterest"></i></a></li>
    <li class="social-gplus"><a href="#"><i class="fa fa-google-plus"></i></a></li>
    <li class="social-dribbble"><a href="#"><i class="fa fa-dribbble"></i></a></li>
    <li class="social-skype"><a href="#"><i class="fa fa-skype"></i></a></li>
    <li class="social-linkedin"><a href="#"><i class="fa fa-linkedin"></i></a></li>
    <li class="social-wordpress"><a href="#"><i class="fa fa-wordpress"></i></a></li>
    <li class="social-delicious"><a href="#"><i class="fa fa-delicious"></i></a></li>
    <li class="social-behance"><a href="#"><i class="fa fa-behance"></i></a></li>
    <li class="social-dropbox"><a href="#"><i class="fa fa-dropbox"></i></a></li>
    <li class="social-soundcloud"><a href="#"><i class="fa fa-soundcloud"></i></a></li>
    <li class="social-deviantart"><a href="#"><i class="fa fa-deviantart"></i></a></li>
    <li class="social-yahoo"><a href="#"><i class="fa fa-yahoo"></i></a></li>
    <li class="social-flickr"><a href="#"><i class="fa fa-flickr"></i></a></li>
    <li class="social-digg"><a href="#"><i class="fa fa-digg"></i></a></li>
    <li class="social-tumblr"><a href="#"><i class="fa fa-tumblr"></i></a></li>
    <li class="social-github"><a href="#"><i class="fa fa-github"></i></a></li>
    <li class="social-amazon"><a href="#"><i class="fa fa-amazon"></i></a></li>
    <li class="social-xing"><a href="#"><i class="fa fa-xing"></i></a></li>
    <li class="social-wikipedia"><a href="#"><i class="fa fa-wikipedia-w"></i></a></li>
    <li class="social-android"><a href="#"><i class="fa fa-android"></i></a></li>
    <li class="social-apple"><a href="#"><i class="fa fa-apple"></i></a></li>
  </ul>
</div>

You can change the social-icon styles with using following classes :

Class Description
.color-hover Display color hover on social-icon
.border .color-hover Display color hover on social-icon with square border
.border .rounded .color-hover Display color hover on social-icon with rounded border
.color Display social icon with color
Suggest Edit