Font AWESOME! in Tips and Tricks
- May 29, 2014, 1: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 29, 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!
gypsy spirit ⋅ May 29, 2014
thank you...must get my head around the 'how to' first and that may take a while, but its a great idea. p
Everything Good Rebecca ⋅ May 29, 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
gypsy spirit ⋅ April 27, 2016
my font size has shrunk and I have trouble reading it. Tried settings but no where to fix. My pc is on normal font elsewhere so its just here on prosebox this is happening. Help please?
simple mind gypsy spirit ⋅ April 27, 2016
Try the key combo Ctrl and +
That's the shortcut for zoom in for most browsers, zoom out is Ctrl and -
gypsy spirit simple mind ⋅ April 27, 2016
thanks....thaats fixed it. have a great day Boss....
simple mind gypsy spirit ⋅ April 28, 2016
Awesome, you too!