Social Icons

Default Icon Style

Icons default


<ul class="social-icons">
  <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-vk"></i></a></li>
</ul>


Icons bordered

By default, all the .icon-bordered does is apply some basic border and padding to contain some content.


<ul class="social-icons icon-bordered">
  <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-instagram"></i></a></li>
</ul>


Icons bordered rounded

By default, all the .icon-bordered.icon-rounded does is apply some basic border and padding to contain some content.


<ul class="social-icons icon-bordered icon-rounded">
  <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-digg"></i></a></li>
</ul>


Icons bordered circled

By default, all the .icon-bordered.icon-circled does is apply some basic border and padding to contain some content.


<ul class="social-icons icon-bordered icon-circled">
  <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-instagram"></i></a></li>
</ul>

Font Icon Gray


Icons styled: icon-gray

By default, all the .icon-gray does is apply some basic border and padding to contain some content.


<ul class="social-icons icon-gray">
  <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-digg"></i></a></li>
</ul>


Icons styled: icon-gray icon-rounded

By default, all the .icon-gray.icon-rounded does is apply some basic border and padding to contain some content.


<ul class="social-icons icon-gray icon-rounded">
  <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-instagram"></i></a></li>
</ul>


Icons styled: icon-gray icon-circled

By default, all the .icon-gray.icon-circled does is apply some basic border and padding to contain some content.


<ul class="social-icons icon-gray icon-circled">
  <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-digg"></i></a></li>
</ul>


Icons styled: icon-gray icon-bordered

By default, all the .icon-gray.icon-bordered does is apply some basic border and padding to contain some content.


<ul class="social-icons icon-gray icon-bordered">
  <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-instagram"></i></a></li>
</ul>


Icons styled: icon-gray icon-bordered icon-rounded

By default, all the .icon-gray.icon-bordered.icon-rounded does is apply some basic border and padding to contain some content.


<ul class="social-icons icon-gray icon-bordered icon-rounded">
  <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-digg"></i></a></li>
</ul>


Icons styled: icon-gray icon-bordered icon-circled

By default, all the .icon-gray.icon-bordered.icon-circled does is apply some basic border and padding to contain some content.


<ul class="social-icons icon-gray icon-bordered icon-circled">
  <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-instagram"></i></a></li>
</ul>

Font Icon Dark


Icons styled: icon-dark

By default, all the .icon-dark does is apply some basic border and padding to contain some content.


<ul class="social-icons icon-dark">
  <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-digg"></i></a></li>
</ul>


Icons styled: icon-dark icon-rounded

By default, all the .icon-dark.icon-rounded does is apply some basic border and padding to contain some content.


<ul class="social-icons icon-dark icon-rounded">
  <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-instagram"></i></a></li>
</ul>


Icons styled: icon-dark icon-circled

By default, all the .icon-dark.icon-circled does is apply some basic border and padding to contain some content.


<ul class="social-icons icon-dark icon-circled">
  <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-digg"></i></a></li>
</ul>


Icons styled: icon-dark icon-bordered

By default, all the .icon-dark.icon-bordered does is apply some basic border and padding to contain some content.


<ul class="social-icons icon-dark icon-bordered">
  <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-instagram"></i></a></li>
</ul>


Icons styled: icon-dark icon-bordered icon-rounded

By default, all the .icon-dark.icon-bordered.icon-rounded does is apply some basic border and padding to contain some content.


<ul class="social-icons icon-dark icon-bordered icon-rounded">
  <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-digg"></i></a></li>
</ul>


Icons styled: icon-dark icon-bordered icon-circled

By default, all the .icon-dark.icon-bordered.icon-circled does is apply some basic border and padding to contain some content.


<ul class="social-icons icon-dark icon-bordered icon-circled">
  <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-instagram"></i></a></li>
</ul>

Font Icon Theme Colored


icon default - theme colored

icon dark - theme colored

icon gray - theme colored


icon default - theme colored
<ul class="social-icons icon-theme-colored">
  <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-instagram"></i></a></li>
</ul>
<ul class="social-icons icon-bordered icon-theme-colored">
  <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-instagram"></i></a></li>
</ul>
<ul class="social-icons icon-bordered icon-rounded icon-theme-colored">
  <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-instagram"></i></a></li>
</ul>
<ul class="social-icons icon-bordered icon-circled icon-theme-colored">
  <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-instagram"></i></a></li>
</ul>
icon dark - theme colored
<ul class="social-icons icon-dark icon-theme-colored">
  <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-instagram"></i></a></li>
</ul>
<ul class="social-icons icon-dark icon-rounded icon-theme-colored">
  <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-instagram"></i></a></li>
</ul>
<ul class="social-icons icon-dark icon-circled icon-theme-colored">
  <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-instagram"></i></a></li>
</ul>
<ul class="social-icons icon-dark icon-bordered icon-theme-colored">
  <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-instagram"></i></a></li>
</ul>
<ul class="social-icons icon-dark icon-bordered icon-rounded icon-theme-colored">
  <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-instagram"></i></a></li>
</ul>
<ul class="social-icons icon-dark icon-bordered icon-circled icon-theme-colored">
  <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-instagram"></i></a></li>
</ul>
icon gray - theme colored
<ul class="social-icons icon-gray icon-theme-colored">
  <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-instagram"></i></a></li>
</ul>
<ul class="social-icons icon-gray icon-rounded icon-theme-colored">
  <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-instagram"></i></a></li>
</ul>
<ul class="social-icons icon-gray icon-circled icon-theme-colored">
  <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-instagram"></i></a></li>
</ul>
<ul class="social-icons icon-gray icon-bordered icon-theme-colored">
  <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-instagram"></i></a></li>
</ul>
<ul class="social-icons icon-gray icon-bordered icon-rounded icon-theme-colored">
  <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-instagram"></i></a></li>
</ul>
<ul class="social-icons icon-gray icon-bordered icon-circled icon-theme-colored">
  <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-instagram"></i></a></li>
</ul>

Font Icon Different Colored


Icons styled: icon-theme-colored

By default, all the .social-icons.icon-dark does is apply some basic border and padding to contain some content.


<ul class="social-icons icon-dark">
  <li><a href="#" data-bg-color="#3B5998"><i class="fa fa-facebook"></i></a></li>
  <li><a href="#" data-bg-color="#02B0E8"><i class="fa fa-twitter"></i></a></li>
  <li><a href="#" data-bg-color="#4C75A3"><i class="fa fa-vk"></i></a></li>
</ul>

Icons with Text


Icons with Text

By default, all the .social-icons.icon-gray.icon-lg does is apply some basic border and padding to contain some content.


<ul class="social-icons icon-gray icon-lg clearfix"> <a class="pull-left mr-15" href="#"><i class="fa fa-facebook"></i></a>
  <h5 class="mb-5">Facebook</h5>
  <p>Lorem ipsum dolor sit.</p>
</ul>



<ul class="social-icons icon-dark icon-lg">
  <a class="pull-left mr-15" href="#"><i class="fa fa-facebook"></i></a>
  <h5 class="mb-5">Facebook</h5>
  <p>Lorem ipsum dolor sit.</p>
</ul>



<ul class="social-icons icon-dark icon-theme-colored icon-lg">
  <a class="pull-left mr-15" href="#"><i class="fa fa-facebook"></i></a>
  <h5 class="mb-5">Facebook</h5>
  <p>Lorem ipsum dolor sit.</p>
</ul>




<ul class="social-icons icon-dark icon-lg clearfix"> 
  <a class="pull-left mr-15" href="#" data-bg-color="#3B5998"><i class="fa fa-facebook"></i></a>
  <h5 class="mb-5">Facebook</h5>
  <p>Lorem ipsum dolor sit.</p>
</ul>

Icons with Text

By default, all the .social-icons.icon-dark does is apply some basic border and padding to contain some content.


<ul class="social-icons icon-dark " data-bg-color="#f1f1f1"> 
  <a class="pull-left m-0 mr-15" href="#" data-bg-color="#3B5998"><i class="fa fa-facebook"></i></a>
  <p class="mt-5">Facebook</p>
</ul>
<ul class="social-icons icon-dark " data-bg-color="#f1f1f1"> 
  <a class="pull-left m-0 mr-15" href="#" data-bg-color="#D71619"><i class="fa fa-google-plus"></i></a>
  <p class="mt-5">Google plus</p>
</ul>


<ul class="social-icons icon-dark icon-md icon-circled inline-block text-center pull-left " data-bg-color="#f1f1f1"> 
  <a class="pull-left m-0 mr-15" href="#" data-bg-color="#3B5998">class="fa fa-facebook"></i></a> <br>
  <p class="text-gray m-0">25589</p>
</ul>
<ul class="social-icons icon-dark icon-md icon-circled inline-block text-center pull-left " data-bg-color="#f1f1f1"> 
  <a class="m-0 mb-10" href="#" data-bg-color="#02B0E8"><i class="fa fa-twitter"></i></a> <br>
  <p class="text-gray m-0">25589</p>
</ul>

Font Icons with Tooltip


By default, all the .social-icons.icon-theme-colored does is apply some basic border and padding to contain some content.

Tooltip on Top

Tooltip on Left

Tooltip on Right

Tooltip on Bottom


<ul class="social-icons">
  <li><a href="#" data-toggle="tooltip" data-placement="top" title="facebook"><i class="fa fa-facebook"></i></a></li>
  <li><a href="#" data-toggle="tooltip" data-placement="top" title="twitter"><i class="fa fa-twitter"></i></a></li>
  <li><a href="#" data-toggle="tooltip" data-placement="top" title="instagram"><i class="fa fa-instagram"></i></a></li> 
</ul>


<ul class="social-icons">
  <li><a href="#" data-toggle="tooltip" data-placement="left" title="facebook"><i class="fa fa-facebook"></i></a></li>
  <li><a href="#" data-toggle="tooltip" data-placement="left" title="twitter"><i class="fa fa-twitter"></i></a></li>
  <li><a href="#" data-toggle="tooltip" data-placement="left" title="instagram"><i class="fa fa-instagram"></i></a></li> 
</ul>


<ul class="social-icons">
  <li><a href="#" data-toggle="tooltip" data-placement="right" title="facebook"><i class="fa fa-facebook"></i></a></li>
  <li><a href="#" data-toggle="tooltip" data-placement="right" title="twitter"><i class="fa fa-twitter"></i></a></li>
  <li><a href="#" data-toggle="tooltip" data-placement="right" title="instagram"><i class="fa fa-instagram"></i></a></li>
</ul>


<ul class="social-icons">
  <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="facebook"><i class="fa fa-facebook"></i></a></li>
  <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="twitter"><i class="fa fa-twitter"></i></a></li>
  <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="instagram"><i class="fa fa-instagram"></i></a></li>
</ul>

Different Icons Sizes


Icons sm

By default, all the .social-icons.icon-gray does is apply some basic border and padding to contain some content.

Icons default - icons-sm
Icons gray - icons-sm
Icons dark - icons-sm
Icons theme colored - icons-sm

<ul class="social-icons icon-sm">
   <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-instagram"></i></a></li> 
</ul>


<ul class="social-icons icon-sm icon-gray">
   <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-instagram"></i></a></li>
</ul>


<ul class="social-icons icon-sm icon-dark">
  <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-instagram"></i></a></li>
</ul>


<ul class="social-icons icon-sm icon-theme-colored">
  <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-instagram"></i></a></li>
</ul>

Icons default

By default, all the .social-icons.icon-gray does is apply some basic border and padding to contain some content.

Icons default
Icons gray
Icons dark
Icons theme colored

<ul class="social-icons">
  <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-instagram"></i></a></li>
</ul>


<ul class="social-icons icon-gray">
  <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-instagram"></i></a></li>
</ul>


<ul class="social-icons icon-dark">
  <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-instagram"></i></a></li>
</ul>


<ul class="social-icons icon-theme-colored">
  <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-instagram"></i></a></li>
</ul>

Icons md

By default, all the .social-icons.icon-gray does is apply some basic border and padding to contain some content.

Icons default - icons-md
Icons gray - icons-md
Icons dark - icons-md
Icons theme colored - icons-md

<ul class="social-icons icon-md">
  <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-instagram"></i></a></li>
</ul>


<ul class="social-icons icon-md icon-gray">
  <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-instagram"></i></a></li>
</ul>


<ul class="social-icons icon-md icon-dark">
  <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-instagram"></i></a></li>
</ul>


<ul class="social-icons icon-md icon-theme-colored">
  <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-instagram"></i></a></li>
</ul>

Icons lg

By default, all the .social-icons.icon-gray does is apply some basic border and padding to contain some content.

Icons default - icons-lg
Icons gray - icons-lg
Icons dark - icons-lg
Icons theme colored - icons-lg

<ul class="social-icons icon-lg">
  <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-instagram"></i></a></li>
</ul>


<ul class="social-icons icon-lg icon-gray">
  <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-instagram"></i></a></li>
</ul>


<ul class="social-icons icon-lg icon-dark">
  <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-instagram"></i></a></li>
</ul>


<ul class="social-icons icon-lg icon-theme-colored">
  <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-instagram"></i></a></li>
</ul>

Icons xl

By default, all the .social-icons.icon-gray does is apply some basic border and padding to contain some content.

Icons default - icons-xl
Icons gray - icons-xl
Icons dark - icons-xl
Icons theme colored - icons-xl

<ul class="social-icons icon-xl">
  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
  <li><a href="#"><i class="fa fa-twitter"></i></a></li>
</ul>


<ul class="social-icons icon-xl icon-gray">
  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
  <li><a href="#"><i class="fa fa-twitter"></i></a></li>
</ul>


<ul class="social-icons icon-xl icon-dark">
  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
  <li><a href="#"><i class="fa fa-twitter"></i></a></li>
</ul>


<ul class="social-icons icon-xl icon-theme-colored">
  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
  <li><a href="#"><i class="fa fa-twitter"></i></a></li>
</ul>