The font-awesome icon set is available as a font. You can find more info about font-awesome here: http://fontawesome.io/.
To get started, add the following to your HTML head:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel= "stylesheet">
You can then add icons from the font-awesome set. Paste icons into your HTML editor in this format:
<i class="fa fa-camera"></i>
This displays a camera icon: .
It’s easy to display icons at different sizes:
<p><i class=”fa fa-coffee fa-lg”></i> fa-coffee – 33% bigger</p> <p><i class=”fa fa-coffee fa-2x”></i> fa-coffee – 2 x bigger</p> <p><i class=”fa fa-coffee fa-3x”></i> fa-coffee – 3 x bigger</p> <p><i class=”fa fa-coffee fa-4x”></i> fa-coffee – 4 x bigger</p> <p><i class=”fa fa-coffee fa-5x”></i> fa-coffee 5 x bigger</p>
Results in this:
fa-coffee – 33% bigger
fa-coffee – 2 x bigger
fa-coffee – 3 x bigger
fa-coffee – 4 x bigger
fa-coffee 5 x bigger
You can find the full list of icons here: http://fontawesome.io/icons/. There are a wide variety of icons, including directional symbols, currency symbols and brand icons. Check out the Facebook “f” in a variety of sizes:
Get creative with lists, by replacing the default bullet:
- This list…
- Has interesting icons
- From font-awesome
- Replacing the default bullets
In this case, CSS has been tweaked like so, to remove the default bullets for the fa-ul class and position the new icons properly:
.post_box ul.fa-ul { list-style-type: none; }
.post_content .fa-li { top: 5px; }
Because they display as fonts, you can style the icons with CSS font-styles. For example, here’s a purple coloured briefcase icon that transitions to bronze over 0.8 seconds when hovered:
