Stylize Font Awesome

Here is a little guide on how to Rotate, Flip, Resize, Compress, Color, Lighten & Bold Font Awesome:

Rotate

<i class="fas fa-walking"></i>
<i class="fas fa-walking fa-rotate-90"></i>
<i class="fas fa-walking fa-rotate-180"></i>
<i class="fas fa-walking fa-rotate-270"></i>

Flip

<i class="fas fa-satellite-dish"></i>
<i class="fas fa-satellite-dish fa-flip-horizontal"></i>
<i class="fas fa-satellite-dish fa-flip-vertical"></i>

Resize

<i class="fas fa-truck-pickup"></i>
<i class="fas fa-truck-pickup fa-lg"></i>
<i class="fas fa-truck-pickup fa-2x"></i>
<i class="fas fa-truck-pickup fa-3x"></i>
<i class="fas fa-truck-pickup fa-5x"></i>
<i class="fas fa-truck-pickup fa-7x"></i>

Compress

Everything below this point, you can add your own CSS class [e.g. fa-*] to only affect certain icons, or apply the styling to the root icon [e.g. fa-truck-pickup] to affect every icon on your website without adding additional classes.

<style>
.fa-compress {
  font-size: 0.5em;
}
</style>
<i class="fas fa-compress-arrows-alt fa-compress"></i>
<i class="fas fa-compress-arrows-alt"></i>
<i class="fas fa-compress-arrows-alt fa-7x"></i>

If needed, you can change out EM, for PX or REM.

Color

You can use a HEX code “#FF0000” or the color name “red”, CSS3 can tell the difference. I prefer HEX, naming the color bugs me.

<style>
.fa-red {
  color: #FF0000;
}
</style>
<i class="fas fa-fire-alt fa-red"></i>
<i class="fas fa-fire-alt"></i>

Light & Bold

Adjust the text-stroke pixel weight accordingly for your desired affect.

<style>
.fa-thin {
  -webkit-text-stroke: 6px #FFFFFF; /* background color */
  color: #000;
}
.fa-fat {
  -webkit-text-stroke: 5px #FF0000; /* font color */
  color: #FF0000;
}
</style>
<i class="far fa-laugh"></i>
<i class="far fa-laugh fa-thin"></i>
<i class="far fa-laugh fa-fat"></i>
Isaac Adams-Hands

Full Stack Developer, Digital Marketer, and InfoSec enthusiast. He received his Bachelor’s Degree from the University of Western Sydney and his Business Diploma from Georgian College before joining various marketing positions in search portals, e-commerce, higher education, and addiction recovery services.

Follow @ twitter

Related posts

Namecheap’s free DYNDNS

Stumbled upon Namecheaps free DYNDNS service this morning, and I can’t be more impressed. All I did was buy a 0.66 cent domain Namecheap Enabled the Dynamic DNS in the Advanced DNS settings: Then added the client to my home media server: Windows: Direct UpdateMac: NC DNS Updater, IP MonitorUnix: DDClient , IPCheckOther: Java Dynamic… Read More

Dynamic Page Listings in #WP

Here is how-to dynamically list all children pages associated under a parent page in WordPress. This allows you to change and update pages without updating a sidebar widget/page, and removes the need to create numerous distinct sidebars/sections. To enable this code, add it to your WordPress themes functions.php file, then add the shortcode to the… Read More