Examples

After you install Ficons, you can place Ficons just
about anywhere with the tag.

Drop-In Replacement for Font Awesome

Ficons is built as a drop-in replacement for Font Awesome, which means you can replace it with Ficons and everything should work the same, although Ficons has several improvements.

Basic Icons

You can place Ficons just about anywhere using the CSS Prefix fa and the icon’s
name. Ficons is designed to be used with inline elements. We use the <i> tag
for brevity, but using a <span> is more semantically correct

fa-magic

<i class="fa fa-magic"></i> fa-magic

If you change the font-size of the icon’s container, the icon gets bigger.
Same things goes for color, drop shadow, and anything else that gets inherited
using CSS.

Larger Icons

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

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

<i class="fa fa-magic fa-lg"></i> fa-lg
<i class="fa fa-magic fa-2x"></i> fa-2x
<i class="fa fa-magic fa-3x"></i> fa-3x
<i class="fa fa-magic fa-4x"></i> fa-4x
<i class="fa fa-magic fa-5x"></i> fa-5x

If your icons are getting chopped off on top and bottom, make sure you have
sufficient line-height.

Fixed Width Icons

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

  Home
  Heart
  Magic

<i class="fa fa-home fa-fw"></i>&nbsp; Home
<i class="fa fa-heart fa-fw"></i>&nbsp; Heart
<i class="fa fa-magic fa-fw"></i>&nbsp; Magic

List Icons

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

• List icons


• can be used


• as bullets


• in lists

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

Bordered & Pulled Icons

Use fa-border and fa-pull-right or fa-pull-left for easy pull quotes or
article icons.

Tomorrow we will run faster, stretch out our arms farther… And then one fine
morning— So we beat on, boats against the current, borne back ceaselessly into the past.

<i class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"></i>
Tomorrow we will run faster, stretch out our arms farther... And then one fine morning&mdash; So we beat on, boats against the current, borne back ceaselessly into the past.

Animated Icons

Use the fa-spin class to get any icon to rotate, and use fa-pulse to have it
rotate with 8 steps. Works well with fa-spinner, fa-refresh, and fa-cog.

Loading…

Loading…

Loading…

Loading…

<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

Some browsers on some platforms have issues with animated icons resulting in a
jittery wobbling effect.

CSS3 animations aren’t supported in IE8 - IE9.

Rotated & Flipped

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

normal

fa-rotate-90

fa-rotate-180

fa-rotate-270

fa-flip-horizontal

fa-flip-vertical

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

Custom CSS

Anything you can do with CSS font styles, you can do with Ficons.