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. :)
Deleted user ⋅ November 22, 2013
grool
Mum of Yum ⋅ November 22, 2013
Another fab feature -thank you!!
Leanne 🌈 ⋅ November 22, 2013
:)
Deleted user ⋅ November 22, 2013
Sweet. Glyphicons still work, too? Let's see: <i class="icon-thumbs-up"><i> should give ...
simple mind Deleted user ⋅ November 22, 2013
They should still work in entries... comments are stripping out class attributes I think.
simple mind Deleted user ⋅ November 22, 2013
and bootstrap 3 has a new set of "glyphicon" classes that should still work.
Deleted user ⋅ November 22, 2013
ahhh ok. No. But now there's <i class="fa fa-thumbs-o-up"><i>?
Deleted user ⋅ November 22, 2013
oops. ? Maybe not in notes?
simple mind Deleted user ⋅ November 22, 2013
There, I fixed it. :)
simple mind Deleted user ⋅ November 22, 2013
simple mind likes this.
Deleted user simple mind ⋅ November 22, 2013
haha. So does G.
QueSeraSera ⋅ November 22, 2013
cool!
Deleted user ⋅ November 23, 2013
NIIIIICE!
Pretty Fly Jedi ⋅ November 23, 2013
H. Majesty T. Mudfish Queen ⋅ November 23, 2013
Omg. I don't even know what FONT ICONS ARE!!!???????????? But, thank you. I know I'm gonna love the option once I figure out what they are. I'm so techno-handicapped...?
September's Mistress ⋅ November 24, 2013
So I keep trying to preview my entry, but the preview isn't showing up and I have my Prosebox on one of the new themes. Just thought you should know
Princess Buttercup September's Mistress ⋅ November 25, 2013
yup, I have the same problem too. The typing/editing area goes white, but then I never get the actual preview. I am also using the dark theme, and I use Firefox, if that helps.
*Amour De Bebe* ⋅ August 03, 2014
How can I change the front? The usual <font face="font here"> </font> Doesn't work :/