7 FontAwesome tricks you probably didn't know about

We’re sure you’re using the fantasic FontAwesome CSS library in all your web apps. Great icons and easy to use! But are you using all the tricks that make FontAwesome even easier to use? Check out these 7 FontAwesome tricks that you may not have spotted in the documentation. 1. You can increase the size […]

This article was posted by Independent Software, a website and database application development company based in Maputo, Mozambique. Our website offers regular write-ups on technical and design issues, ranging from details at code level to 3D Studio Max rendering. Read more about Independent Software's philosophy, or get in touch with Independent Software.

We’re sure you’re using the fantasic FontAwesome CSS library in all your web apps. Great icons and easy to use! But are you using all the tricks that make FontAwesome even easier to use? Check out these 7 FontAwesome tricks that you may not have spotted in the documentation.

1. You can increase the size of your FontAwesome icons automatically

The size of any FontAwesome icons you include in your HTML are always the same as the font-size specified for their container. So in order to get a bigger icon in relation to the text, you’d have to write something like this:

There’s a simpler approach! Just use fa-lg  (33% increase), fa-2x , fa-3x , fa-4x  or fa-5x  classes:

which yields

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

2. Fixed-width FontAwesome icons

If you’re using icons in a list of links, you might find yourself forced to use a table just to get the icons and link texts to line up properly:

Instead of using a table element, just add the fa-fw  class to get fixed-width icons!

  Home
  Tags

3. Use FontAwesome icons to replace unordered list bullets

Rather than laboriously writing CSS for removing the default bullets from unordered lists, then adding FontAwesome icons to serve as new bullets, which you would then make sure all have equal width, why not use the fa-ul  class on your unordered list:

  • List icons
  • can be used
  • as bullets
  • in lists

4. Use a FontAwesome icon as a pull quote icon marker

When you want to get big old 50px floating quote marks to indicate a quote in your text, you’re looking at 10 minutes of writing and debugging CSS. Why not use the fa-pull-left  and fa-pull-right  classes to float an icon before your quote text automatically? You can also add a border to it using the fa-border  class.


…tomorrow we will run faster, stretch out our arms farther…
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.

5. Animate your FontAwesome icons!

Use the fa-spin  class to get any icon to rotate, and use fa-pulse  to have it rotate with 8 steps. Works well with fa-spinner , fa-refresh , and fa-cog . Be aware, though, that these CSS3 animations do not work in Internet Explorer 8 and 9.

6. Rotate and flip your FontAwesome icons

To arbitrarily rotate and flip icons, use the fa-rotate-*  and fa-flip-*  classes.

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical

7. Stack multiple FontAwesome icons on top of each other to create new ones (without writing any CSS)

To stack multiple icons, use the fa-stack  class on the parent, the fa-stack-1x  for the regularly sized icon, and fa-stack-2x  for the larger icon. fa-inverse  can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.

fa-ban on fa-camera

fa-twitter on fa-square-o

fa-flag on fa-circle

fa-terminal on fa-square

fa-ban on fa-camera

Did this article help you out? Please help us find more time to write useful guides & articles like this by donating a buck or two. It'll keep us coffee-fueled. Thanks!

Comments

1 One Response to “7 FontAwesome tricks you probably didn’t know about”
  1. JCP says:

    Cool stuff!… Another handy trick I’ve used is to use css to change the icon, for instance if you have a down chevron to indicate that you can toggle a section open, you can change the chevron to an X indicating that clicking again will close the section. If a parent element gets a new style added when the section is open the css would look something like this:
    .parent.open i.chevron-down{content: “\f057”;}

Leave a Reply

Your email address will not be published. Required fields are marked *