After you install Ficons, you can place Ficons just
about anywhere with the tag.
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.
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
for brevity, but using a
<span> is more semantically correct
<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
To increase icon sizes relative to their container, use the
<i class="fa fa-magic fa-lg"></i> fa-lg
If your icons are getting chopped off on top and bottom, make sure you have
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
<i class="fa fa-home fa-fw"></i> Home
fa-li to easily replace default bullets in unordered lists.
- List icons
- can be used
- as bullets
- in lists
fa-pull-left for easy pull quotes or
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>
fa-spin class to get any icon to rotate, and use
fa-pulse to have it
rotate with 8 steps. Works well with
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
Some browsers on some platforms have issues with animated icons resulting in a
jittery wobbling effect.
CSS3 animations aren’t supported in IE8 - IE9.
To arbitrarily rotate and flip icons, use the
<i class="fa fa-shield"></i> normal<br>
Anything you can do with CSS font styles, you can do with Ficons.