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...

You must be logged in to comment. Please sign in or join Prosebox to leave a comment.