The basics of it are really simple, even if you have never used HTML code before. Unlike graphical GIF, PNG or JPG icons, Font Awesome icons are formed using text (fonts), as the name suggests; resulting is very low bandwidth and icons which remain pin-sharp on retina devices. Icons can be styled and recoloured using regular CSS code. Here's how it works:
<i class='fa '></i>
<i class='fa fa-cloud'></i>
. This code will result in this:Icons can go in the site title, site slogan, footer, ExtraContent regions, page name, sidebar title, and any styled text or HTML code region in your page. Icons will be displayed on all major web browsers and mobile / handheld devices as far back as Internet Explorer 8. IE6 and IE7 are not supported. Please refer to the Font Awesome website for more examples and instructions. The ThemeFlood theme user guide also has a section dedicated to Font Awesome icons.
Want to make your icons bigger?
<i class='fa fa-icon-flag' style=''></i>
<i class='fa fa-icon-flag' style='font-size: 24px;'></i>
fa-lg
(33% increase), fa-2x
, fa-3x
, fa-4x
, or fa-5x
classes like this <i class="fa fa-flag fa-4x"></i>
which would result in this:
Change the colour of your icons? CSS can help again...
<i class='icon-umbrella-left' style=''></i>
<i class='icon-umbrella-left' style='color: #0000FF;'></i>
Rotated or spinning animations? No problem...
To rotate icons add a class of fa-rotate-90
or icon-rotate-180
or fa-rotate-270
or icon-rotate-horizontal
or icon-rotate-vertical
to the icons like: <i class='icon-leaf fa-rotate-180'></i>
which will result in this:
Easily stack multiple icons. Use the icon-stack
class on the parent and icon-stack-base
for the bottom icon. So your code would look like this:
<span class='fa-stack fa-x5'> <i class='fa fa-bug fa-stack-1x' style='color: green;'></i> <i class='fa fa-ban fa-stack-2x' style='color: red;'></i> </span>Which would result in this:
To make icons spin, simply add a class of fa-spin to the icons like: <i class='fa-refresh icon-spin'></i>
, which will create the following effect:
Just remember that some of this fancy wizz-bang stuff will not work in older web browsers; where animated icons will degrade gracefully back to static icons.