Using Font Awesome Icons in your entries in Tips and Tricks
- Nov. 22, 2013, 6:17 p.m.
- |
- Public
OK, this is going to be one of the more advanced tips and tricks entry, since HTML is involved. Don't say I didn't warn you. :)
Because I'm now loading the Font Awesome icons, it's possible to use those in your entries. The link above is a comprehensive cheat sheet of what's available.
To use them, you add HTML like this:
<i class="fa fa-rocket"></i>
This adds the rocket icon, like so:
Notice that the "fa" is always in the class, and you just change the "fa-rocket" to whichever icon you want to use.
It's relative to your font size, so you could do something like this:
<h1>To infinity, and BEYOND! <i class="fa fa-rocket"></i></h1>
And you'll get:
To infinity, and BEYOND!
To increase your icon size relative to the font size, add something like:
<h4>Show the money! <i class="fa fa-money fa-2x"></i></h4>
And you get:
Show me the money!
The cool thing about these icons is that they are vector graphics - meaning they are going to look amazing on your friend's Retina display. No jagged pixels. :)
Loading comments...