How to Flip / Scale / Bold and Otherwise Style Your Fontawesome Icons

4 min readJul 22, 2016

So your app is using Fontawesome icons but they look just like every other app’s and you need something more custom. I was in the same boat and spent time researching how to bring my own look. Here are some methods I found for flipping, rotating, scaling, bolding, scaling, coloring, and otherwise making your Fontawesome icons more you. Some are supported classes from Fontawesome and some are CSS.

Flip

Fontawesome has built in support for common flipping needs via two classes:

fa-flip-* ( options: horizontal, vertical )<i class="fa-search fa-flip-horizontal"><i>
<i class="fa-search fa-flip-vertical"></i>

Rotate

Same for rotate and the cardinal directions:

fa-rotate-* ( options: 90, 180, 270 )<i class="fa fa-search fa-rotate-90"></i>
<i class="fa fa-search fa-rotate-180"></i>
<i class="fa fa-search fa-rotate-270"></i>

Bigger

Fontawesome also has you covered if you want to scale up your icons to make them bigger. Simply add supported classes for large, 2x, 3x, 4x, and 5x the standard size:

fa-* (options: lg, 2x, 3x, 4x, 5x)<i class="fa fa-search fa-lg"></i> fa-lg
<i class="fa fa-search fa-2x"></i> fa-2x
<i class="fa fa-search fa-3x"></i> fa-3x
<i class="fa fa-search fa-4x"></i> fa-4x
<i class="fa fa-search fa-5x"></i> fa-5x

Smaller

But what if you need to scale down your icons to fit your layout, a form, or overlay onto other icons? Fontawesome doesn’t offer classes for that. However because the icons are displayed as a font, you can add any CSS you would normally use to scale a font to scale the icon:

Just create a CSS class (with whatever level of specificity you need to grab the icon / link) and target that to the icon’s selector:

.fa-search {
  font-size: 0.5em;
}<i class="fa fa-search"></i>

Fontawesome rightly cares a lot about accessibility. My guess here is that anything less than the standard size can cause issues for some users and should only be used for non-essential design items rather than critical UX.

Color

Simply use custom CSS on the class and you’re good to go. Here we’re applying both a font size and a color on a horizontally flipped icon as an example:

.fa-search {
  font-size: 3.0em;
  color: blue;
}<i class="fa-search fa-flip-horizontal"><i>

You can of course apply the usual hover effects to yield color changing and scaling on hover so your icons pop.

Bold / Light

This is where we veer off road and things start to get a bit hacky. Until now, we’ve been using (1) Fontawesome’s provided classes (2) standard font styles from CSS. Now we’re going to use some of the less browser compatible font effects to add some additional customization. In fact, as of July 2016 this is the compatibility chart for the below stylings that all use -webkit-text-stroke:

No surprise, no IE. Now, on with it!

Fontawesome doesn’t have a bold class. And you wouldn’t think you would need it. But I found myself wanting to match the stroke width on a few differently stroked icons to make them coordinate a bit better. You might also want to do this to coordinate adjacent text that has a thicker or thinner stroke than your Fontawesome icon.

The above applies a background color stroke to make the icon thin or a font color stroke to make the icon thick.

.fa-search {
  -webkit-text-stroke: 2px white; /* background color */
  color: blue;
}.fa-search {
  -webkit-text-stroke: 3px blue; /* font color */
  color: blue;
}

Outline

You can even combine stroke and fill to get an outline or dual color effect:

.fa-search {
  -webkit-text-stroke: 2px blue;
  -webkit-text-fill-color: cyan;
}

Just remember again that this won’t get you cross browser compatibility. (I’m told you could do some experimenting with text shadows in IE to bring your entire app up to speed…)

That’s it!

With the help of Fontawesome’s built in classes and your own custom CSS, you’re ready to make your icons pop.