Styled Icons

Default Icon Style

Icons default


<ul class="styled-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="styled-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="styled-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="styled-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="styled-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="styled-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="styled-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="styled-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="styled-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="styled-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="styled-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="styled-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="styled-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="styled-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="styled-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="styled-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="styled-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="styled-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="styled-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="styled-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="styled-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="styled-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="styled-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="styled-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="styled-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="styled-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="styled-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="styled-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="styled-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="styled-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="styled-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="styled-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 .styled-icons.icon-dark does is apply some basic border and padding to contain some content.


<ul class="styled-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 .styled-icons.icon-gray.icon-lg does is apply some basic border and padding to contain some content.

Facebook

Lorem ipsum dolor sit.

Twitter

Lorem ipsum dolor sit.

Skype

Lorem ipsum dolor sit.

Google plus

Lorem ipsum dolor sit.


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


Facebook

Lorem ipsum dolor sit.

Twitter

Lorem ipsum dolor sit.

Skype

Lorem ipsum dolor sit.

Google plus

Lorem ipsum dolor sit.


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


Facebook

Lorem ipsum dolor sit.

Twitter

Lorem ipsum dolor sit.

Skype

Lorem ipsum dolor sit.

Google plus

Lorem ipsum dolor sit.


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


Facebook

Lorem ipsum dolor sit.

Twitter

Lorem ipsum dolor sit.

Skype

Lorem ipsum dolor sit.

Google plus

Lorem ipsum dolor sit.



<ul class="styled-icons icon-dark icon-lg clearfix"> 
  <a class="pull-left flip 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 .styled-icons.icon-dark does is apply some basic border and padding to contain some content.

Facebook

Google plus

Twitter

rss

Skype

Instagram


25589


25589


25589


25589


25589


<ul class="styled-icons icon-dark " data-bg-color="#f1f1f1"> 
  <a class="pull-left flip 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="styled-icons icon-dark " data-bg-color="#f1f1f1"> 
  <a class="pull-left flip 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="styled-icons icon-dark icon-md icon-circled inline-block text-center pull-left flip " data-bg-color="#f1f1f1"> 
  <a class="pull-left flip 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="styled-icons icon-dark icon-md icon-circled inline-block text-center pull-left flip " 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 .styled-icon.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="styled-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="styled-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="styled-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="styled-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 .styled-icon.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="styled-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="styled-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="styled-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="styled-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 .styled-icon.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="styled-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="styled-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="styled-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="styled-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 .styled-icon.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="styled-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="styled-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="styled-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="styled-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 .styled-icon.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="styled-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="styled-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="styled-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="styled-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 .styled-icon.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="styled-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="styled-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="styled-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="styled-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>