Font AWESOME! in Tips and Tricks

  • May 29, 2014, 2:47 a.m.
  • |
  • Public

I haven't written anything in this book for ages, so I thought it would be worth a quick entry on the phenomenon known as Font Awesome. Font Awesome is the icon set I use for Prosebox. It's becoming rather popular and they seem to be updating it regularly. I've just updated Prosebox to point to the newest set, version 4.1.0:

http://fontawesome.io/icons/

To use these in Prosebox, just reference the list linked above, and pop the following into your entry:

<i class="fa <your-code-here>"></i>

So for example, if I want the Star Wars Imperial Crest:

<i class="fa fa-empire"></i>

And you get:

It will scale to match your text size, so if you put it in a header row:

# HEADER 1 <i class="fa fa-empire"></i>

(the single hashtag with a space at the beginning of the row gives you the largest header, equivalent to an <h1> HTML tag)

And you get:

HEADER 1

Or if you want to make it larger than your text:

This paw is 5 times larger than the text <i class="fa fa-5x fa-paw"></i>

Result:

This paw is 5 times larger than the text

Since these icons are all vector graphics, you will impress your friends with Retina displays - no matter how big you make 'em, they won't get jagged and pixelated.

Enjoy!


Loading comments...

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