How to Add Font Awesome Icons to Your WordPress Site?

Posted on February 25th, 2019

 

Font Awesome is a toolkit of fonts and icons, which are based on CSS and LESS with 1,278 icons, was released on December 7, 2017. The latest version of Font Awesome comes in two packages Font Awesome Free and the proprietary Font Awesome Pro. We can create a visually appealing website by adding Font Awesome Icons.  Font Awesome Icons are loads faster because they are not images, they are CSS fonts. The main benefits of Font Awesome Icons are listed below.

1) Without compromising the quality of icons, we can display the icons at any sizes. That means the icons are vectors.

2) The icons are customizable, you can change the color and also add animation to the icons.

3) Supported in all browsers.

 

We can add the Font Awesome to our WordPress site in two ways: manually and using a plugin.

 

Adding Font Awesome Icons to your website manually.

       We can add Font Awesome Icons manually to our WordPress site by adding some codes to your theme’s function.php file. Follow the below steps to add Font Awesome Icons manually.

1) Login to your WordPress Dashboard.

2) Click on the “Editor” menu from the section “Appearance”.

font awsome icon

 

 3) Click on the link “Theme Functions” from the right-hand side of the prompted screen.

font awsome icon

 

4) Copy and paste the below codes to the functions.php file.

add_action( ‘wp_enqueue_scripts’, ‘tthq_add_custom_fa_css’ );

function tthq_add_custom_fa_css() {

wp_enqueue_style( ‘custom-fa’, ‘https://use.fontawesome.com/releases/v5.0.6/css/all.css’ );

}

 

Adding Font Awesome to Your WP Site Using a Plugin

We can add Font Awesome Icons to your website using a free plugin “Better Font Awesome”. To install the plugin, please follow the steps.

1) Login to your WordPress Dashboard.

2) Click on “Add New” under the section “Plugins” and search for the plugin “Better Font Awesome” and install and activate the plugin.

3) On any post or page, use the insert of this plugin to embed a range of icons on your website.

Leave a Reply