Styling Font Awesome icons for Beginners

Subscribe to my newsletter and never miss my upcoming articles

If you’re new to Font Awesome and want to learn how to style your icons, here’s a quick guide on how you can do so using some of the built-in features from Font Awesome, along with utilizing your own classes. For the purpose of this article, I’ll be using my own free kit from Font Awesome.

Built-In Features

Sizing Icons

With Font Awesome, you can specify the size of the icons within the code when choosing your icon. As an example, let’s take a look at the following snippet:

<i class = “fas fa-baby></i>

By default, it’ll appear very small on our browser. But, what if we want to make it 6x the size of the original icon? We can do so by adding the following:

<i class = “fas fa-baby fa-6x></i>

Below are the comparisons before and after we added the adjusted size:

fontawesome_size.png

Here’s a list of sizes that you can adjust within your icon’s code:


  • fa-xs
  • fa-sm
  • fa-lg
  • fa-2x
  • fa-3x
  • fa-4x
  • fa-5x
  • fa-6x
  • fa-7x
  • fa-8x
  • fa-9x
  • fa-10x

Rotating Icons

By default, Font Awesome icons will be upright in a vertical position. However, we can rotate the icons from different angles and flip them either horizontally, vertically, or both.

Let’s say, for example, you included the broom icon and set it to 6x from its original size. You would like to have the icon rotated to a 90-degree angle.

Here’s the original code below:

<i class=“fas fa-broom fa-6x”></i>

We can add the following property right after our size declaration to let our browser know we want our icon to be rotated at a 90-degree angle:

<i class=“fas fa-broom fa-6x fa-rotate-90”></i>

Below are the comparisons before and after we added the rotation code:

fontawesome_rotate.png

Here’s a list of the available rotation properties you can use with your icons:

  • fa-rotate-90
  • fa-rotate-180
  • fa-rotate-270
  • fa-flip-horizontal
  • fa-flip-vertical
  • fa-flip-both

Animations

Have you thought about animating your icons? While you can manually define them on your CSS file using the @keyframes and animation properties, you can utilize the basic animations from Font Awesome using the fa-spin and fa-pulse classes.

As an example, I’m going to make my cat icon spin around. Here’s the code snippet on how it can be done:

<i class = “fas fa-cat fa-5x fa-spin”></i>

And here's the result:

fontawesome-spinningcat.gif

Using classes

Of course, there are times where you’ll need to manually define your own classes if you’re looking to do more customization on your icons.

Let’s say you want to change the color of your icon that’s 3x the size of the original. By default, the color is set to black. To change the color of the icon, you can simply create a new class next to the predefined Font Awesome classes within the code snippet. As an example, I would like to change the color of my heart icon from black to pink. I added a class pink-heart in the code. Here’s what my code looks like:

HTML:

<i class="pink-heart fas fa-heart fa-3x"></i>

CSS:



.pink-heart {color: pink;}

Below are the comparisons before and after we added the custom class to change the icon color:

font_awesome_iconcolour.png

Conclusion

Font Awesome icons can be customizable using built-in features and defining your own classes. To check out their current list of icons and documentation about how to use Font Awesome, be sure to visit their website here. Like the article? Feel free to share and follow me on Twitter!

Comments (2)

Prateek Aher's photo

Thank you Diana, I found this helpful.

Diana Chin's photo

Thanks, Prateek! So glad you found my article to be helpful :)