How to Style Font Awesome Icons and Resizing in WordPress

additonal CSS

Font Awesome is a library of vector icons created using an icon font. This means it doesn’t use images and that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Style Font Awesome Icons and Resizing in WordPress

In this article, you will learn how to use classes to display icons as well as resizing icons and changing their colors.

Before getting started, you have to add Font Awesome Icons to WordPress. In case you don’t know, follow below steps to register Font Awesome to WordPress

A quick tutorial: In your theme folder, by using any FTP client software find functions.php. Once you find open the file in a text editor like notepad++ and add below code to your functions file

function wmpudev_enqueue_icon_stylesheet() {
	wp_register_style( 'fontawesome', 'http:////' );
	wp_enqueue_style( 'fontawesome');
add_action( 'wp_enqueue_scripts', 'wmpudev_enqueue_icon_stylesheet' );

Go back to the topic: Now you can style Font Awesome right away.

Resizing Font Awesome Icons

Let’s start with a basic one – resizing the size of your Font Awesome icons. By default, the icons are fairly small, so this is definitely a situation you’re likely to increase but it also depends on where you’re displaying them.

Note we customizing

To increase an icon’s size, you can use any one of these modifiers:

  • fa-lg – increases size by 33%
  • fa-2x – doubles the size
  • fa-3x – triples the size
  • fa-4x – …
  • fa-5x – …

Or you can also put pixels instead:

  • fa-10px
  • fa-20px
  • fa-30xx
  • fa-40px
  • fa-50px

For example, if you’re going to tripling an icon’s size the code will be:

<i class=”fa fa-3x fa-home” aria-hidden=”true”></i>

Changing Font Awesome Icon Colors

Changing the colors of your icons is necessary as they all come in default black or white.

It’s super simple to change the Font Awesome Icon color. If you’re changing below icon color.

fa fa-3x fa-home

Then CSS class will be:

.fa-home {
color: #ffff;

Next, just visit the site and go to Customize > Additional CSS to add above CSS code

additonal CSS


Thanks for Reading

Enjoyed this post? Share it with your networks.

Leave a Feedback!

This site uses Akismet to reduce spam. Learn how your comment data is processed.