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
<?php
function wmpudev_enqueue_icon_stylesheet() {
wp_register_style( 'fontawesome', 'http:////maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' );
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
