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 |
Social Icon
Use the below code to display Social icon:
You can change the social-icon styles with using following classes :
.color-hover
.border .color-hover
.border .rounded .color-hover
.color