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 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:
<p><i class="fa fa-camera-retro" style="font-size:200%"></i> fa-camera-retro</p>There’s a simpler approach! Just use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x or fa-5x classes:
<p><i class="fa fa-camera-retro fa-lg"></i> fa-lg</p>
<p><i class="fa fa-camera-retro fa-2x"></i> fa-2x</p>
<p><i class="fa fa-camera-retro fa-3x"></i> fa-3x</p>
<p><i class="fa fa-camera-retro fa-4x"></i> fa-4x</p>
<p><i class="fa fa-camera-retro fa-5x"></i> fa-5x</p>which yields
2. Fixed-width FontAwesome icons using fa-fw
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:
<table>
<tbody>
<tr>
<td style="width:25px"><i class="fa fa-home"></i></td>
<td><a href>Home</a></td>
</tr>
<tr>
<td><i class="fa fa-book"></i></td>
<td><a href>Books</a></td>
</tr>
<tr>
<td><i class="fa fa-tag"></i></td>
<td><a href>Tags</a></td>
</tr>
<tr>
<td><i class="fa fa-sign-out"></i></td>
<td><a href>Logout</a></td>
</tr>
</tbody>
</table>Instead of using a table element, just add the fa-fw class to get fixed-width icons!
<div><i class="fa fa-home fa-fw"></i> <a href>Home</a></div>
<div><i class="fa fa-book fa-fw"></i> <a href>Books</a></div>
<div><i class="fa fa-tag fa-fw"></i> <a href>Tags</a></div>
<div><i class="fa fa-sign-out fa-fw"></i> <a href>Logout</a></div>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:
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>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.
<i class="fa fa-quote-left fa-3x fa-pull-left"></i>
...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.
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>6. Rotate and flip your FontAwesome icons
To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes.
<i class="fa fa-fw fa-shield"></i> normal<br>
<i class="fa fa-shield fa-fw fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-fw fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-fw fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-fw fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-fw fa-flip-vertical"></i> fa-flip-vertical7. 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.
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-cameraThat’s it, friends. Happy coding!