Font Awesome icon usage statistics

  • 7 types of Font Awesome iconic font are used and found 7 times in total.
  • EZRAVENTURE.FR used 1.0 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of EZRAVENTURE.FR are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • EZRAVENTURE.FR includes "" to use Font Awesome and information from CSS is like below.
  • /**************************************
    	01. Font Awesome 4.0.3
    	02. FancyBox
    	03. Bootstrap, Easy Responsive Tabs & Responsive Tabs
    	04. BxSlider
    	05. Isotope
    	06. Revolution Slider
    	07. FlexSlider
    	08. Audio Player
    	09. ColorPicker
    	10. OWL carousel
    	11. Genericons

Examples and source code


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

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






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-user fa-lg"></i> fa-user</p>
<p><i class="fa fa-user fa-2x"></i> fa-user</p>
<p><i class="fa fa-user fa-3x"></i> fa-user</p>
<p><i class="fa fa-user fa-4x"></i> fa-user</p>
<p><i class="fa fa-user fa-5x"></i> fa-user</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-user fa-fw"></i> Home</a></li>
  <li><a href="#"><i class="fa fa-user fa-fw"></i> Library</a></li>
  • 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-user"></i>Font Awesome icon can be used</li>
  <li><i class="fa-li fa fa-user fa-spin"></i>to easily replace lists</li>

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-user 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.


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

<i class="fa fa-user"></i>  normal<br>
<i class="fa fa-user fa-rotate-90"></i>  fa-rotate-90<br>
<i class="fa fa-user fa-rotate-180"></i>  fa-rotate-180<br>
<i class="fa fa-user fa-rotate-270"></i>  fa-rotate-270<br>
<i class="fa fa-user fa-flip-horizontal"></i>  fa-flip-horizontal<br>
<i class="fa fa-user 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-user fa-2x fa-spin"></i>
<i class="fa fa-user fa-3x fa-spin"></i>
<i class="fa fa-user fa-4x fa-spin"></i>

CSS3 animations aren't supported in IE8 - IE9.

fa-user on fa-square-o
fa-user on fa-circle
fa-userl on fa-square
fa-ban on fa-user

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-user fa-stack-1x"></i>
fa-user on fa-square-o<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-user fa-stack-1x fa-inverse"></i>
fa-user on fa-circle<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-user fa-stack-1x fa-inverse"></i>
fa-user on fa-square<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-user fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
fa-ban on fa-user

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

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

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

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