Add Font Awesome in WordPress Theme

Featured Video Play Icon

WordPress Tutorial: In simple steps, going to show you how to add Font Awesome in WordPress Theme. The following codes are tested by using WordPress Child Theme.

About Font Awesome: It is a font and icon toolkit based on CSS and LESS. Lightweight and widely used font icon toolset has huge collection of icons for Free and Pro users.

How to use Font Awesome Icons?

Using Font Awesome icons are very easy and straight forward. HTML <i> tag is the best to use for font awesome icons.

To use Font Awesome in a project, first, need to call the Library either from CDN or from a web server. Then add related HTML <i> tag.  A simple example on how to use is:

  • Firstly, add this <script src="https://kit.fontawesome.com/yourcode.js"></script> code in HTML <head> tag. Note: Please get a free Font Awesome Kit at https://fontawesome.com/start and replace the “YOURCODE.JS” with your own kit
  • Secondly, add this HTML <i class="fa fa-home"></i> code in project where you would like to display it.

How to use Font Awesome in WordPress Theme?

To use font awesome icons in WordPress theme right way, follow these below steps:

Step 1: Open functions.php file (Assuming you are using a WordPress child theme)

Step 2: Add this below code

// Add Font Awesome in WordPress Theme
add_action ('wp_enqueue_scripts', 'font_awesome_script');
function font_awesome_script(){
    wp_enqueue_script('fontawesome-script', 'https://kit.fontawesome.com/a076d05399.js', array(), NULL, true);
    // Get your own Font Awesome Kit at https://fontawesome.com/start
};

Step 3: Save it

Step 4: Add the font awesome icons relative class with HTML <i> tag in WordPress theme template file. Such as

<!-- Add Font Awesome html tag icon url: https://fontawesome.com/icons-->
<i class="fas fa-home"></i>

Step 5: Save it and you are done.

Leave a Reply

Your email address will not be published. Required fields are marked *