Font Awesome icon usage statistics

  • 1 types of Font Awesome iconic font are used and found 6 times in total.
  • POLITOBZOR.NET used 6.0 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of POLITOBZOR.NET are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • POLITOBZOR.NET includes "http://cdn.politobzor.net/templates/politobzor/css/style.css?v=2" to use Font Awesome and information from CSS is like below.
  • @font-face {
        font-family: 'FontAwesome';
        src: url('../fonts/fontawesome-webfont.eot');
        src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),  url('../fonts/fontawesome-webfont.woff') format('woff'),  url('../fonts/fontawesome-webfont.ttf') format('truetype'),  url('../fonts/fontawesome-webfont.svg') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    [class^="icon-"], [class*=" icon-"] {
        font-family: 'FontAwesome';
        font-weight: normal;
        font-style: normal;
        text-decoration: inherit;
        -webkit-font-smoothing: antialiased;
        display: inline;
        width: auto;
        height: auto;
        line-height: normal;
        vertical-align: baseline;
        background-image: none;
        background-position: 0% 0%;
        background-repeat: repeat;
        margin-top: 0;
        padding-right: 3px;
        font-size: 14px !important;
        text-decoration: none !important;
        text-shadow:-1px -1px 1px rgba(255,255,255,0.1), 1px 1px 1px rgba(255,255,255,0.1), 1px 1px 1px rgba(0,0,0,0.1);
    }
    .icon-search:before               { content: "\f002"; }
    .icon-envelope:before             { content: "\f003"; }
    .icon-heart:before                { content: "\f004"; }
    .icon-star:before                 { content: "\f005"; }
    .icon-star-empty:before           { content: "\f006"; }
    .icon-user:before                 { content: "\f007"; }
    .icon-th:before                   { content: "\f00a"; }
    .icon-th-list:before              { content: "\f00b"; }
    .icon-ok:before                   { content: "\f00c"; }
    .icon-remove:before               { content: "\f00d"; }
    .icon-zoom-in:before              { content: "\f00e"; }
    .icon-zoom-out:before             { content: "\f010"; }
    .icon-off:before                  { content: "\f011"; }
    .icon-signal:before               { content: "\f012"; }
    .icon-cog:before                  { content: "\f013"; }
    .icon-trash:before                { content: "\f014"; }
    .icon-home:before                 { content: "\f015"; }
    .icon-file:before                 { content: "\f016"; }
    .icon-time:before                 { content: "\f017"; }
    .icon-download-alt:before         { content: "\f019"; }
    .icon-download:before             { content: "\f01a"; }
    .icon-upload:before               { content: "\f01b"; }
    .icon-inbox:before                { content: "\f01c"; }
    .icon-repeat:before               { content: "\f01e"; }
    .icon-refresh:before              { content: "\f021"; }
    .icon-list-alt:before             { content: "\f022"; }
    .icon-lock:before                 { content: "\f023"; }
    .icon-flag:before                 { content: "\f024"; }
    .icon-tag:before                  { content: "\f02b"; }
    .icon-tags:before                 { content: "\f02c"; }
    .icon-book:before                 { content: "\f02d"; }
    .icon-bookmark:before             { content: "\f02e"; }
    .icon-print:before                { content: "\f02f"; }
    .icon-font:before                 { content: "\f031"; }
    .icon-bold:before                 { content: "\f032"; }
    .icon-italic:before               { content: "\f033"; }
    .icon-text-height:before          { content: "\f034"; }
    .icon-text-width:before           { content: "\f035"; }
    .icon-align-left:before           { content: "\f036"; }
    .icon-align-center:before         { content: "\f037"; }
    .icon-align-right:before          { content: "\f038"; }
    .icon-align-justify:before        { content: "\f039"; }
    .icon-list:before                 { content: "\f03a"; }
    .icon-indent-left:before          { content: "\f03b"; }
    .icon-indent-right:before         { content: "\f03c"; }
    .icon-picture:before              { content: "\f03e"; }
    .icon-pencil:before               { content: "\f040"; }
    .icon-edit:before                 { content: "\f044"; }
    .icon-share:before                { content: "\f045"; }
    .icon-check:before                { content: "\f046"; }
    .icon-chevron-left:before         { content: "\f053"; }
    .icon-chevron-right:before        { content: "\f054"; }
    .icon-plus-sign:before            { content: "\f055"; }
    .icon-minus-sign:before           { content: "\f056"; }
    .icon-remove-sign:before          { content: "\f057"; }
    .icon-ok-sign:before              { content: "\f058"; }
    .icon-question-sign:before        { content: "\f059"; }
    .icon-info-sign:before            { content: "\f05a"; }
    .icon-remove-circle:before        { content: "\f05c"; }
    .icon-ok-circle:before            { content: "\f05d"; }
    .icon-ban-circle:before           { content: "\f05e"; }
    .icon-arrow-left:before           { content: "\f060"; }
    .icon-arrow-right:before          { content: "\f061"; }
    .icon-arrow-up:before             { content: "\f062"; }
    .icon-arrow-down:before           { content: "\f063"; }
    .icon-share-alt:before            { content: "\f064"; }
    .icon-plus:before                 { content: "\f067"; }
    .icon-minus:before                { content: "\f068"; }
    .icon-exclamation-sign:before     { content: "\f06a"; }
    .icon-gift:before                 { content: "\f06b"; }
    .icon-eye-open:before             { content: "\f06e"; }
    .icon-eye-close:before            { content: "\f070"; }
    .icon-warning-sign:before         { content: "\f071"; }
    .icon-calendar:before             { content: "\f073"; }
    .icon-comment:before              { content: "\f075"; }
    .icon-chevron-up:before           { content: "\f077"; }
    .icon-chevron-down:before         { content: "\f078"; }
    .icon-retweet:before              { content: "\f079"; }
    .icon-folder-close:before         { content: "\f07b"; }
    .icon-folder-open:before          { content: "\f07c"; }
    .icon-bar-chart:before            { content: "\f080"; }
    .icon-key:before                  { content: "\f084"; }
    .icon-cogs:before                 { content: "\f085"; }
    .icon-comments:before             { content: "\f086"; }
    .icon-thumbs-up:before            { content: "\f087"; }
    .icon-thumbs-down:before          { content: "\f088"; }
    .icon-star-half:before            { content: "\f089"; }
    .icon-heart-empty:before          { content: "\f08a"; }
    .icon-signout:before              { content: "\f08b"; }
    .icon-pushpin:before              { content: "\f08d"; }
    .icon-external-link:before        { content: "\f08e"; }
    .icon-signin:before               { content: "\f090"; }
    .icon-upload-alt:before           { content: "\f093"; }
    .icon-phone:before                { content: "\f095"; }
    .icon-bookmark-empty:before       { content: "\f097"; }
    .icon-phone-sign:before           { content: "\f098"; }
    .icon-unlock:before               { content: "\f09c"; }
    .icon-credit-card:before          { content: "\f09d"; }
    .icon-rss:before                  { content: "\f09e"; }
    .icon-bullhorn:before             { content: "\f0a1"; }
    .icon-bell:before                 { content: "\f0a2"; }
    .icon-hand-right:before           { content: "\f0a4"; }
    .icon-hand-left:before            { content: "\f0a5"; }
    .icon-hand-up:before              { content: "\f0a6"; }
    .icon-hand-down:before            { content: "\f0a7"; }
    .icon-circle-arrow-left:before    { content: "\f0a8"; }
    .icon-circle-arrow-right:before   { content: "\f0a9"; }
    .icon-circle-arrow-up:before      { content: "\f0aa"; }
    .icon-circle-arrow-down:before    { content: "\f0ab"; }
    .icon-globe:before                { content: "\f0ac"; }
    .icon-wrench:before               { content: "\f0ad"; }
    .icon-tasks:before                { content: "\f0ae"; }
    .icon-briefcase:before            { content: "\f0b1"; }
    .icon-group:before                { content: "\f0c0"; }
    .icon-cut:before                  { content: "\f0c4"; }
    .icon-copy:before                 { content: "\f0c5"; }
    .icon-paper-clip:before           { content: "\f0c6"; }
    .icon-save:before                 { content: "\f0c7"; }
    .icon-reorder:before              { content: "\f0c9"; }
    .icon-list-ul:before              { content: "\f0ca"; }
    .icon-list-ol:before              { content: "\f0cb"; }
    .icon-strikethrough:before        { content: "\f0cc"; }
    .icon-underline:before            { content: "\f0cd"; }
    .icon-table:before                { content: "\f0ce"; }
    .icon-money:before                { content: "\f0d6"; }
    .icon-caret-down:before           { content: "\f0d7"; }
    .icon-caret-up:before             { content: "\f0d8"; }
    .icon-caret-left:before           { content: "\f0d9"; }
    .icon-caret-right:before          { content: "\f0da"; }
    .icon-sort:before                 { content: "\f0dc"; }
    .icon-sort-down:before            { content: "\f0dd"; }
    .icon-sort-up:before              { content: "\f0de"; }
    .icon-envelope-alt:before         { content: "\f0e0"; }
    .icon-undo:before                 { content: "\f0e2"; }
    .icon-comment-alt:before          { content: "\f0e5"; }
    .icon-comments-alt:before         { content: "\f0e6"; }
    .icon-bolt:before                 { content: "\f0e7"; }
    .icon-sitemap:before              { content: "\f0e8"; }
    .icon-paste:before                { content: "\f0ea"; }
    .icon-lightbulb:before            { content: "\f0eb"; }
    .icon-bell-alt:before             { content: "\f0f3"; }
    .icon-file-alt:before             { content: "\f0f6"; }
    .icon-double-angle-left:before    { content: "\f100"; }
    .icon-double-angle-right:before   { content: "\f101"; }
    .icon-double-angle-up:before      { content: "\f102"; }
    .icon-double-angle-down:before    { content: "\f103"; }
    .icon-angle-left:before           { content: "\f104"; }
    .icon-angle-right:before          { content: "\f105"; }
    .icon-angle-up:before             { content: "\f106"; }
    .icon-angle-down:before           { content: "\f107"; }
    .icon-desktop:before              { content: "\f108"; }
    .icon-laptop:before               { content: "\f109"; }
    .icon-tablet:before               { content: "\f10a"; }
    .icon-mobile-phone:before         { content: "\f10b"; }
    .icon-circle-blank:before         { content: "\f10c"; }
    .icon-quote-left:before           { content: "\f10d"; }
    .icon-quote-right:before          { content: "\f10e"; }
    .icon-spinner:before              { content: "\f110"; }
    .icon-circle:before               { content: "\f111"; }
    .icon-reply:before                { content: "\f112"; }
    .icon-folder-close-alt:before     { content: "\f114"; }
    .icon-folder-open-alt:before      { content: "\f115"; }
    .icon-twitter-sign:before         { content: "\f081"; }
    .icon-facebook-sign:before        { content: "\f082"; }
    .icon-twitter:before              { content: "\f099"; }
    .icon-facebook:before             { content: "\f09a"; }
    .icon-film:before                 { content: "\f008"; }*/
    @font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=3.1.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=3.1.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff?v=3.1.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=3.1.0') format('truetype'),url('../fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0') format('svg');font-weight:normal;font-style:normal}

Examples and source code

icon-play-sign

Place Font Awesome icons just about anywhere with the <i> tag.

<i class=" icon-play-sign"></i> icon-play-sign
Icon classes are echoed via CSS :before.

icon-play-sign

icon-play-sign

icon-play-sign

icon-play-sign

To increase icon sizes relative to their container, use the icon-large (33% increase), icon-2x, icon-3x, icon-4x, or icon-5x classes.

<p><i class=" icon-play-sign icon-large"></i> icon-play-sign</p>
<p><i class=" icon-play-sign icon-2x"></i> icon-play-sign</p>
<p><i class=" icon-play-sign icon-3x"></i> icon-play-sign</p>
<p><i class=" icon-play-sign icon-4x"></i> icon-play-sign</p>
If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.
  • Font Awesome icon can be used
  • to easily replace lists

Use icon-ul and icon-li to easily replace default bullets in unordered lists.

<ul class="icon-ul">
  <li><i class="icon-li  icon-play-sign"></i>Font Awesome icon can be used</li>
  <li><i class="icon-li  icon-play-sign icon-spin"></i>to easily replace lists</li>
</ul>

Use a few styles together and you'll have easy pull quotes or a great introductory article icon.

Use icon-border and pull-right or pull-left for easy pull quotes or article graphics.

<i class=" icon-play-sign icon-2x pull-left icon-border"></i>
Use a few styles together and you'll have easy pull quotes or a great introductory article icon.

  normal
  icon-rotate-90
  icon-rotate-180
  icon-rotate-270
  icon-flip-horizontal
  icon-flip-vertical

To arbitrarily rotate and flip icons, use the icon-rotate-* and icon-flip-* classes.

<i class=" icon-play-sign"></i>  normal<br>
<i class=" icon-play-sign icon-rotate-90"></i>  icon-rotate-90<br>
<i class=" icon-play-sign icon-rotate-180"></i>  icon-rotate-180<br>
<i class=" icon-play-sign icon-rotate-270"></i>  icon-rotate-270<br>
<i class=" icon-play-sign icon-flip-horizontal"></i>  icon-flip-horizontal<br>
<i class=" icon-play-sign icon-flip-vertical"></i>  icon-flip-vertical

Use the icon-spin class to get any icon to rotate.

<i class=" icon-play-sign icon-2x icon-spin"></i>
<i class=" icon-play-sign icon-3x icon-spin"></i>
<i class=" icon-play-sign icon-4x icon-spin"></i>

CSS3 animations aren't supported in IE8 - IE9.

icon-play-sign on icon-check-empty
icon-play-sign on icon-circle
icon-play-signl on icon-sign-blank
icon-ban-circle on icon-play-sign

To stack multiple icons, use the icon-stack class on the parent, the icon-light for the regularly sized icon, and icon-stack-base for the larger icon. icon-light can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.

<span class="icon-stack">
  <i class=" icon-check-empty icon-stack-base"></i>
  <i class=" icon-play-sign "></i>
</span>
icon-play-sign on icon-check-empty<br>
<span class="icon-stack">
  <i class=" icon-circle icon-stack-base"></i>
  <i class=" icon-play-sign icon-light"></i>
</span>
icon-play-sign on icon-circle<br>
<span class="icon-stack">
  <i class=" icon-sign-blank icon-stack-base"></i>
  <i class=" icon-play-sign icon-light "></i>
</span>
icon-play-sign on icon-sign-blank<br>
<span class="icon-stack">
  <i class=" icon-play-sign icon-light"></i>
  <i class=" icon-ban-circle icon-stack-base text-error"></i>
</span>
icon-ban-circle on icon-play-sign