Our motive is to help the poor, helpless and orphan children all over the world.

Latest News

Contact Info

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="fab 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 1/2/3/4

Use icon-theme-colored1, icon-theme-colored2, icon-theme-colored3, icon-theme-colored4 for theme color variation

icon default - theme colored

icon dark - theme colored

icon gray - theme colored 


icon default - theme colored
<ul class="styled-icons icon-theme-colored1">
  <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-colored1">
  <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-colored1">
  <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-colored1">
  <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-colored1">
  <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-colored1">
  <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-colored1">
  <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-colored1">
  <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-colored1">
  <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-colored1">
  <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-colored1">
  <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-colored1">
  <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-colored1">
  <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-colored1">
  <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-colored1">
  <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-colored1">
  <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-colored1

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-tm-bg-color="#3B5998"><i class="fa fa-facebook"></i></a></li>
  <li><a href="#" data-tm-bg-color="#02B0E8"><i class="fa fa-twitter"></i></a></li>
  <li><a href="#" data-tm-bg-color="#4C75A3"><i class="fab 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.

Facebook

Lorem ipsum dolor sit.

Twitter

Lorem ipsum dolor sit.

Skype

Lorem ipsum dolor sit.

Google plus

Lorem ipsum dolor sit.

Facebook

Lorem ipsum dolor sit.

Twitter

Lorem ipsum dolor sit.

Skype

Lorem ipsum dolor sit.

Google plus

Lorem ipsum dolor sit.

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="fab 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-colored1 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-colored1">
  <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-colored1">
  <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-colored1">
  <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-colored1">
  <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-colored1">
  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
  <li><a href="#"><i class="fa fa-twitter"></i></a></li>
</ul>