Font Awesome icon usage statistics

  • 2 types of Font Awesome iconic font are used and found 2 times in total.
  • CELISTICS.COM used 1.0 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of CELISTICS.COM are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • CELISTICS.COM includes "http://www.CELISTICS.COM/Styles/Themes/Default/css/groundwork.min.css" to use Font Awesome and information from CSS is like below.
  • @font-face{font-family:AverageSans;font-style:normal;font-weight:400;src:url(../fonts/average-sans-webfont.eot);src:url(../fonts/average-sans-webfont.eot#iefix) format("embedded-opentype"),url(../fonts/average-sans-webfont.woff) format("woff"),url(../fonts/average-sans-webfont.ttf) format("truetype")}.AverageSans{font-family:AverageSans,Helvetica,Arial,Geneva,sans-serif}@font-face{font-family:AmericanTypewriter;font-style:normal;font-weight:400;src:url(../fonts/americantypewriterstd-bold.eot);src:url(../fonts/americantypewriterstd-bold.eot#iefix) format("embedded-opentype"),url(../fonts/americantypewriterstd-bold.woff) format("woff"),url(../fonts/americantypewriterstd-bold.ttf) format("truetype")}.AmericanTypewriter{font-family:AmericanTypewriter,Helvetica,Arial,Geneva,sans-serif}* html{font-size:87.5%}html{font-size:14px;line-height:1.28571em}html,body{font-family:Helvetica,Arial,Geneva,sans-serif;color:#2b2b2d}a,a:visited{color:#044381;-webkit-transition:color .25s;-moz-transition:color .25s;-o-transition:color .25s;transition:color .25s}a:hover,a:focus{color:#00509f;text-decoration:underline}h1,h2,h3,h4,h5,h6{margin-bottom:15px}h1{font-weight:200;font-size:2.33333em;line-height:1.65306em}h2{font-weight:200;font-size:2em;line-height:1.28571em}h3{font-weight:500;font-size:1.5em;line-height:1.71429em}h4{font-weight:500;font-size:1.33333em;line-height:1.92857em}h5{font-weight:900;font-size:1.16667em;line-height:2.20408em}h6{font-weight:900;font-size:1.16667em;line-height:2.20408em;text-transform:uppercase}p,ul,ol,dl{margin-bottom:10px;font-weight:400}ul,ol{margin-left:20px}ul li,ol li,ul.list>li,ol.list>li{display:list-item}dl dt{font-weight:700}dl dd{padding-left:1em;margin-bottom:10px}ul.list,ol.list,ul.unstyled,ol.unstyled{list-style:none}ul.list{margin-left:0}ul.list li:before{content:'\f00c';display:inline-block;width:1.1em;margin-right:.25em;font-family:FontAwesome;font-weight:400;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;font-size:1.2em;vertical-align:baseline;background-image:none;background-position:0 0;background-repeat:repeat;margin-top:0}ol.list{counter-reset:li;margin-left:1.5em;line-height:1.6}ol.list li{position:relative;padding:2px 6px 0}ol.list li:before{content:counter(li);counter-increment:li;position:absolute;top:.1em;left:-2em;width:2em;text-align:center;padding:.3em .1em .1em;font-size:.8em;line-height:1.5;color:#fff;background:#2b2b2d;font-weight:700;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px}blockquote{padding:1.3em 4em 1em;color:#2b2b2d;font-size:1em;line-height:1.47857em;font-weight:700;position:relative;z-index:0;background:#e6e6e6;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px}blockquote:before{content:'\201C';color:#ccc;font-size:6em;display:block;position:absolute;top:.4em;left:.1em;z-index:-1}blockquote:after{content:'\201D';color:#ccc;font-size:6em;display:block;position:absolute;top:.4em;right:.1em;z-index:-1}cite{display:block;position:relative;left:-1em;margin-top:.25em;font-size:1em;line-height:1.22143em;font-weight:400;font-style:normal;color:#505054}cite:before{content:'\2014'}abbr[title],dfn[title],abbr[data-title],dfn[data-title]{border-bottom:1px dotted;cursor:help}em{font-style:italic}b,strong{font-weight:900}code,pre{font-family:monospace}del,strike{text-decoration:line-through}code{white-space:pre-wrap;word-wrap:break-word;min-height:1em;display:inline-block;background:#ccc;border:0;padding:0 .3em;margin:0 .2em;font-weight:400;line-height:inherit}pre{color:#f2f2f2;background:#050505;font-size:1em;line-height:1.28571em;padding:.5em;display:block;border-left:2.6em solid #383838;counter-reset:linenumber}pre code{display:block;background:inherit;margin:0;padding:0}pre code:before{text-align:right;color:#9a9a9a;counter-increment:linenumber;content:counter(linenumber) ".";position:absolute;left:.65em;width:2.6em}.info{color:#3a87ad}.alert{color:#c09853}.warning{color:#ff971e}.error{color:#b94a48}.success{color:#468847}.js .responsive:not(table){-webkit-transition:font .25s;-moz-transition:font .25s;-o-transition:font .25s;transition:font .25s}::-moz-selection{background:#044381;color:#fff;text-shadow:none}::selection{background:#044381;color:#fff;text-shadow:none}ol.list.green li:before{background:#2ecc71}ol.list.blue li:before{background:#3498db}ol.list.purple li:before{background:#9b59b6}ol.list.yellow li:before{background:#f1c40f}ol.list.orange li:before{background:#e67e22}ol.list.red li:before{background:#e74c3c}ol.list.pink li:before{background:#f02475}ol.list.turquoise li:before{background:#1abc9c}ol.list.asphalt li:before{background:#34495e}ol.list li.green:before{background:#2ecc71}ol.list li.blue:before{background:#3498db}ol.list li.purple:before{background:#9b59b6}ol.list li.yellow:before{background:#f1c40f}ol.list li.orange:before{background:#e67e22}ol.list li.red:before{background:#e74c3c}ol.list li.pink:before{background:#f02475}ol.list li.turquoise:before{background:#1abc9c}ol.list li.asphalt:before{background:#34495e}.green{color:#2ecc71}.blue{color:#3498db}.purple{color:#9b59b6}.yellow{color:#f1c40f}.orange{color:#e67e22}.red{color:#e74c3c}.pink{color:#f02475}.turquoise{color:#1abc9c}.asphalt{color:#34495e}@font-face{font-family:FontAwesome;src:url(../fonts/fontawesome-webfont.eot?v=3.2.1);src:url(../fonts/fontawesome-webfont.eot?#iefix&v=3.2.1) format("embedded-opentype"),url(../fonts/fontawesome-webfont.woff?v=3.2.1) format("woff"),url(../fonts/fontawesome-webfont.ttf?v=3.2.1) format("truetype"),url(../fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1) format("svg");font-weight:400;font-style:normal}

Examples and source code

icon-twitter

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

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

icon-twitter

icon-twitter

icon-twitter

icon-twitter

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

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

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

CSS3 animations aren't supported in IE8 - IE9.

icon-twitter on icon-check-empty
icon-twitter on icon-circle
icon-twitterl on icon-sign-blank
icon-ban-circle on icon-twitter

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