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:
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!
Deleted user ⋅ May 29, 2014
Wheee...!
Deleted user ⋅ May 29, 2014
It took a few tries...but I got it. Fun!
Lyn ⋅ May 29, 2014
Deleted user ⋅ May 29, 2014
Pretty cool! Thanks. I will check it out.
EvequeFou ⋅ May 29, 2014
Can you not just do
<i class="fa fa-empire"/>and get ?simple mind EvequeFou ⋅ May 29, 2014
Not really, since Prosebox is using HTML5 rather than XHTML.
http://stackoverflow.com/questions/3558119/are-self-closing-tags-valid-in-html5
EvequeFou simple mind ⋅ May 29, 2014
Interesting -- learned something new already this morning!
simple mind EvequeFou ⋅ May 30, 2014
Glad I could contribute! That is interesting that it's duplicating it... looks like it's getting repeated in your comment - I imagine it's some odd side effect of putting user input through my HTML cleaner and it not validating. :)
EvequeFou ⋅ May 29, 2014
Apparently you can, but I somehow wound up with an extra by doing that. Interesting bug.
I need tea. ⋅ May 29, 2014
Lets see..
I need tea. ⋅ May 29, 2014
yay
mutedexposure ⋅ May 29, 2014
I'm still stupid when it comes to this new fangled stuff. I just type and hope it comes out OK.
Silent Echo/Quiet Storm ⋅ May 29, 2014
that is so far over my head that i got a headache just reading about it. i'll stick with just writing and hoping that soon prosebox will come out with different fonts and sizes. who knows? maybe it already has and i don't know it. take care,
Deleted user ⋅ May 29, 2014
can't wait to try it
missing maui ⋅ May 29, 2014
Let's try:
missing maui ⋅ May 29, 2014
NEAT!
Everything Good Rebecca ⋅ May 30, 2014
Wonder how long it'll be before I decide I must have an awesome font?
hoops ⋅ May 30, 2014
Imperial Scum!
offmychest ⋅ May 30, 2014
excuse me, what??
offmychest ⋅ May 30, 2014
This paw is 5 times larger than the text
offmychest ⋅ May 30, 2014
OK I just copied and pasted it, that I can do! ;)
Kate ⋅ May 30, 2014
Don't need them for PB, but need them for my site! Thanks for the great find!
Who's Laughing Now? ⋅ June 06, 2014
Interesting. To make it simpler than writing out a line of code every time you want a single icon, you could easily add buttons to add them to your text in the same way you have buttons to add italics and bold.
Velveteen ⋅ June 12, 2014
ooooooooooooohhh