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>
Markup
Copy

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

.social-hover-primary
.social-brand
.social-gray
.social-light
.social-vertical

Sizing

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

.social-sm
Default
.social-lg

Variations

There's still more variations for you.

.social-bordered
.social-rounded
.social-hover-bg-brand
.social-bg-brand
.social-bg-pale-brand
.social-bg-gray
.social-bg-light
.social-bg-dark
.social-cycling