Font Awesome icon usage statistics

  • 6 types of Font Awesome iconic font are used and found 11 times in total.
  • NOVOED.COM used 1.8 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of NOVOED.COM are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • NOVOED.COM includes "https://d29rg257idl8cu.cloudfront.net/assets/application-c7d8492208d9022f21080ffcf34056ec.css" to use Font Awesome and information from CSS is like below.
  • /**/:block;position:absolute;z-index:-1;filter:mask();top:-4px;left:-4px;width:200px;height:200px}.ui-progressbar{height:2em;text-align:left;overflow:hidden}.ui-progressbar .ui-progressbar-value{margin:-1px;height:100%}.wmd-panel{margin-left:25%;margin-right:25%;width:50%;min-width:500px}#wmd-editor{background-color:Aquamarine}.wmd-button-bar{width:100%}.wmd-input{height:500px;width:100%;background-color:Gainsboro;border:1px solid DarkGray}.wmd-preview{background-color:LightGray}.wmd-output{background-color:Pink}.wmd-button-row{position:relative;margin:0px;padding:5px;height:20px}.wmd-spacer{width:1px;height:20px;margin-left:7px;margin-right:7px;position:relative;background-color:Silver;display:inline-block;zoom:1;*display:inline;list-style:none}.wmd-button{width:20px;height:20px;margin-left:5px;margin-right:5px;position:relative;background-image:url(wmd-buttons.png);background-repeat:no-repeat;background-position:0px 0px;display:inline-block;zoom:1;*display:inline;list-style:none}.wmd-button>a{width:20px;height:20px;margin-left:5px;margin-right:5px;position:absolute;display:inline-block}.wmd-bold-button{background-position:0px   0px}.wmd-bold-button:hover{background-position:0px -40px}.wmd-bold-button.disabled{background-position:0px -20px}.wmd-italic-button{background-position:-20px   0px}.wmd-italic-button:hover{background-position:-20px -40px}.wmd-italic-button.disabled{background-position:-20px -20px}.wmd-link-button{background-position:-40px   0px}.wmd-link-button:hover{background-position:-40px -40px}.wmd-link-button.disabled{background-position:-40px -20px}.wmd-quote-button{background-position:-60px   0px}.wmd-quote-button:hover{background-position:-60px -40px}.wmd-quote-button.disabled{background-position:-60px -20px}.wmd-code-button{background-position:-80px   0px}.wmd-code-button:hover{background-position:-80px -40px}.wmd-code-button.disabled{background-position:-80px -20px}.wmd-image-button{background-position:-100px   0px}.wmd-image-button:hover{background-position:-100px -40px}.wmd-image-button.disabled{background-position:-100px -20px}.wmd-olist-button{background-position:-120px   0px}.wmd-olist-button:hover{background-position:-120px -40px}.wmd-olist-button.disabled{background-position:-120px -20px}.wmd-ulist-button{background-position:-140px   0px}.wmd-ulist-button:hover{background-position:-140px -40px}.wmd-ulist-button.disabled{background-position:-140px -20px}.wmd-heading-button{background-position:-160px   0px}.wmd-heading-button:hover{background-position:-160px -40px}.wmd-heading-button.disabled{background-position:-160px -20px}.wmd-hr-button{background-position:-180px   0px}.wmd-hr-button:hover{background-position:-180px -40px}.wmd-hr-button.disabled{background-position:-180px -20px}.wmd-undo-button{background-position:-200px   0px}.wmd-undo-button:hover{background-position:-200px -40px}.wmd-undo-button.disabled{background-position:-200px -20px}.wmd-redo-button{background-position:-220px   0px}.wmd-redo-button:hover{background-position:-220px -40px}.wmd-redo-button.disabled{background-position:-220px -20px}.wmd-help-button{background-position:-240px   0px}.wmd-help-button:hover{background-position:-240px -40px}.wmd-help-button.disabled{background-position:-240px -20px}.wmd-help-button{position:absolute;top:5px;right:0px;background-position:-240px 0}.wmd-prompt-background{background-color:Black}.wmd-prompt-dialog{border:1px solid #999999;background-color:#F5F5F5;font-size:0.8em;font-family:arial, helvetica, sans-serif}.wmd-prompt-dialog>form>label{font-size:0.6em;font-weight:bold;margin:4px 0}.wmd-prompt-dialog>form>input[type="text"]{border:1px solid #999999;color:black}.wmd-prompt-dialog>form>input[type="button"]{border:1px solid #888888;font-family:trebuchet MS, helvetica, sans-serif;font-size:0.8em;font-weight:bold}.module{border:1px solid #e2e2e2;margin:.8em 0;background-color:#fff;overflow:auto}.module_controls{padding:.8em}.module_header{color:#fff;padding:.7em .7em .7em 1.4em;background-color:#000}.module_header a{color:#fff}.module_subheader,.module_footer{margin:.6em .8em;padding:.6em}.module_subheader{border-bottom:1px solid #e2e2e2}.module_footer{border-top:1px solid #e2e2e2}.module_body{padding:1em}.module .fieldset{width:100%}.module .fieldset .indent{width:16em}.module .fieldset .label-block{font-weight:bold;text-align:right;display:block;float:left;padding:6px 0px 2px 1em}.module .fieldset .label-block small{font-weight:normal}.module .fieldset .input{padding:.2em 1em;display:block;float:left}.module .clear{clear:both;height:0;overflow:hidden}.module .smaller{font-size:.95em}.module .left{float:left}.module .right{float:right;text-align:right}.controls a{margin:0 5px;font-size:.9em}table{width:100%;border-collapse:collapse}table td{padding:.5em;border-bottom:0px;vertical-align:top}table.forum th{font-weight:normal;padding:.7em;font-size:.9em}table.forum td:first-child{border-left:1px solid #e2e2e2}table.forum td:last-child{border-right:0px}table.forum .icon{width:26px;text-align:center}table.forum .counts{width:8%;text-align:center}table.table-striped tbody td.vote.plus{color:#408000;font-weight:bold}table.table-striped tbody td.vote.minus{color:A00000;font-weight:bold}table.forum .last_post{padding-left:10px}table.forum .description{width:55%;text-align:left;padding-left:20px}table.forum .post_author{padding-left:15px;vertical-align:top !important}table.forum .post_author .name{font-size:1.5em;display:block;margin-bottom:5px}table.forum .post_author .name a{margin-left:-20px}table.forum .post_author .info{display:block;margin:5px 0}table.forum .post_body{width:80%;padding:10px 10px 30px 10px;border-bottom:0px}blockquote{border:1px solid #e2e2e2;font-style:italic;margin:10px 0px 0px 25px;padding:10px}/*!
     *  Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
     *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
     */

Examples and source code

fa-chevron-right

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

<i class="fa fa-chevron-right"></i> fa-chevron-right
Icon classes are echoed via CSS :before.

fa-chevron-right

fa-chevron-right

fa-chevron-right

fa-chevron-right

fa-chevron-right

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

<p><i class="fa fa-chevron-right fa-lg"></i> fa-chevron-right</p>
<p><i class="fa fa-chevron-right fa-2x"></i> fa-chevron-right</p>
<p><i class="fa fa-chevron-right fa-3x"></i> fa-chevron-right</p>
<p><i class="fa fa-chevron-right fa-4x"></i> fa-chevron-right</p>
<p><i class="fa fa-chevron-right fa-5x"></i> fa-chevron-right</p>
If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

Use fa-fw to set icons at a fixed width. Great to use when variable icon widths throw off alignment. Especially useful in things like nav lists.

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#"><i class="fa fa-chevron-right fa-fw"></i> Home</a></li>
  <li><a href="#"><i class="fa fa-chevron-right fa-fw"></i> Library</a></li>
</ul>
  • Font Awesome icon can be used
  • to easily replace lists

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

<ul class="fa-ul">
  <li><i class="fa-li fa fa-chevron-right"></i>Font Awesome icon can be used</li>
  <li><i class="fa-li fa fa-chevron-right fa-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 fa-border and pull-right or pull-left for easy pull quotes or article graphics.

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

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

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

<i class="fa fa-chevron-right"></i>  normal<br>
<i class="fa fa-chevron-right fa-rotate-90"></i>  fa-rotate-90<br>
<i class="fa fa-chevron-right fa-rotate-180"></i>  fa-rotate-180<br>
<i class="fa fa-chevron-right fa-rotate-270"></i>  fa-rotate-270<br>
<i class="fa fa-chevron-right fa-flip-horizontal"></i>  fa-flip-horizontal<br>
<i class="fa fa-chevron-right fa-flip-vertical"></i>  fa-flip-vertical

Use the fa-spin class to get any icon to rotate. Works well with fa-spinner, fa-refresh, and fa-cog.

<i class="fa fa-chevron-right fa-2x fa-spin"></i>
<i class="fa fa-chevron-right fa-3x fa-spin"></i>
<i class="fa fa-chevron-right fa-4x fa-spin"></i>

CSS3 animations aren't supported in IE8 - IE9.

fa-chevron-right on fa-square-o
fa-chevron-right on fa-circle
fa-chevron-rightl on fa-square
fa-ban on fa-chevron-right

To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon. fa-inverse 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="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-chevron-right fa-stack-1x"></i>
</span>
fa-chevron-right on fa-square-o<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-chevron-right fa-stack-1x fa-inverse"></i>
</span>
fa-chevron-right on fa-circle<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-chevron-right fa-stack-1x fa-inverse"></i>
</span>
fa-chevron-right on fa-square<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-chevron-right fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-chevron-right

Font Awesome works great with the full range of Bootstrap components.

<a class="btn btn-danger" href="#">
  <i class="fa fa-chevron-right fa-lg"></i> fa-chevron-right</a>
<a class="btn btn-default btn-sm" href="#">
  <i class="fa fa-chevron-right"></i> fa-chevron-right</a>

<a class="btn btn-lg btn-success" href="#">
  <i class="fa fa-chevron-right fa-2x pull-left"></i> Font Awesome<br>fa-chevron-right



<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-chevron-right fa-fw"></i></span>
  <input class="form-control" type="text" placeholder="fa-chevron-right">
</div>
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-chevron-right fa-fw"></i></span>
  <input class="form-control" type="password" placeholder="fa-chevron-right">
</div>