Social icons

Exhibit your brand on different social networks with an easy to use component and styles.

Basic examples

The following example displays the most basic example of social icons.

<div class="social">
  <a class="social-facebook" href="#"><i class="fa fa-facebook"></i></a>
  <a class="social-twitter" href="#"><i class="fa fa-twitter"></i></a>
  <a class="social-gplus" href="#"><i class="fa fa-google-plus"></i></a>
  <a class="social-instagram" href="#"><i class="fa fa-instagram"></i></a>
  <a class="social-linkedin" href="#"><i class="fa fa-linkedin"></i></a>
  <a class="social-git" href="#"><i class="fa fa-git"></i></a>
  <a class="social-tumblr" href="#"><i class="fa fa-tumblr"></i></a>
  <a class="social-vimeo" href="#"><i class="fa fa-vimeo"></i></a>
  <a class="social-youtube" href="#"><i class="fa fa-youtube"></i></a>
  <a class="social-flickr" href="#"><i class="fa fa-flickr"></i></a>
  <a class="social-reddit" href="#"><i class="fa fa-reddit"></i></a>
  <a class="social-dribbble" href="#"><i class="fa fa-dribbble"></i></a>
  <a class="social-skype" href="#"><i class="fa fa-skype"></i></a>
  <a class="social-lastfm" href="#"><i class="fa fa-lastfm"></i></a>
  <a class="social-behance" href="#"><i class="fa fa-behance"></i></a>
  <a class="social-rss" href="#"><i class="fa fa-rss"></i></a>
</div>

The rest of examples are the other basic variations which is achievable by adding a class to the .social tag.

Sizing

Changing the size of icons is also possible by adding a class name to the .social tag.

Variations

There's still more variations for you.