Font Awesome icon usage statistics

9 types of Font Awesome iconic font are used and found 125 times in total.
FILTERMUSIC.NET used 13.9 Font Awesome classes per each class in average.

40 icon-facebook

40 icon-twitter

38 icon-chevron-right

2 icon-apple

1 icon-android

1 icon-rss

1 icon-reorder

1 icon-google-plus

1 icon-music

Font Awesome usage statistics of FILTERMUSIC.NET are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
FILTERMUSIC.NET includes "http://filtermusic.net/sites/default/files/advagg_css/css__a3RjZVlBIsqEyKpHcrubO0k9ZM9e_R18pTo8NT0lXlA__nPvT3L3m7mkPC8c-rYoO9exjLH2F7hb49lmePMQasbQ__krNAyr1Sy-66MSA9TE_H8WZ7LUZ-GJhpQufi-jXksLA.css" to use Font Awesome and information from CSS is like below.

@font-face{font-family:'FontAwesome';src:url(//filtermusic.net/sites/all/themes/filterbootstrap3/font-awesome/font/fontawesome-webfont.eot?v=3.2.1);src:url(//filtermusic.net/sites/all/themes/filterbootstrap3/font-awesome/font/fontawesome-webfont.eot?#iefix&v=3.2.1) format('embedded-opentype'),url(//filtermusic.net/sites/all/themes/filterbootstrap3/font-awesome/font/fontawesome-webfont.woff?v=3.2.1) format('woff'),url(//filtermusic.net/sites/all/themes/filterbootstrap3/font-awesome/font/fontawesome-webfont.ttf?v=3.2.1) format('truetype'),url(//filtermusic.net/sites/all/themes/filterbootstrap3/font-awesome/font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1) format('svg');font-weight:normal;font-style:normal}

Examples and source code

icon-facebook

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

<i class=" icon-facebook"></i> icon-facebook

Icon classes are echoed via CSS :before.

icon-facebook

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-facebook icon-large"></i> icon-facebook</p>
<p><i class=" icon-facebook icon-2x"></i> icon-facebook</p>
<p><i class=" icon-facebook icon-3x"></i> icon-facebook</p>
<p><i class=" icon-facebook icon-4x"></i> icon-facebook</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-facebook"></i>Font Awesome icon can be used</li>
  <li><i class="icon-li  icon-facebook 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-facebook 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-facebook"></i>  normal<br>
<i class=" icon-facebook icon-rotate-90"></i>  icon-rotate-90<br>
<i class=" icon-facebook icon-rotate-180"></i>  icon-rotate-180<br>
<i class=" icon-facebook icon-rotate-270"></i>  icon-rotate-270<br>
<i class=" icon-facebook icon-flip-horizontal"></i>  icon-flip-horizontal<br>
<i class=" icon-facebook icon-flip-vertical"></i>  icon-flip-vertical

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

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

CSS3 animations aren't supported in IE8 - IE9.

icon-facebook on icon-check-empty
icon-facebook on icon-circle
icon-facebookl on icon-sign-blank
icon-ban-circle on icon-facebook

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-facebook "></i>
</span>
icon-facebook on icon-check-empty<br>
<span class="icon-stack">
  <i class=" icon-circle icon-stack-base"></i>
  <i class=" icon-facebook icon-light"></i>
</span>
icon-facebook on icon-circle<br>
<span class="icon-stack">
  <i class=" icon-sign-blank icon-stack-base"></i>
  <i class=" icon-facebook icon-light "></i>
</span>
icon-facebook on icon-sign-blank<br>
<span class="icon-stack">
  <i class=" icon-facebook icon-light"></i>
  <i class=" icon-ban-circle icon-stack-base text-error"></i>
</span>
icon-ban-circle on icon-facebook

Font Awesome icon usage statistics

Font Awesome information of FILTERMUSIC.NET in detail

Examples and source code

Various Font Awesome icon examples and source code using icon-facebook which has been used mostly(40 times) by FILTERMUSIC.NET

Inline Icons

Larger Icons

List Icons

Bordered & Pulled Icons

Rotated & Flipped

Spinning Icons

Stacked Icons