Using Font Awesome Icons in your entries in Tips and Tricks

  • Nov. 22, 2013, 5: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...?

Dancing.Shadow 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 Dancing.Shadow ⋅ 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 :/

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