Disable Preloader

## 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

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>