How to add Font awesome Icons in WordPress without Plugins

To make your WordPress website more attractive we use icons in our design. These icons give an additional look to your website. We can use these icons anywhere on our website. Using icons in your website have many advantages like we need fewer images and also these are vector based and that’s the most important advantage of using icons. Using icons will also improve page speed because instead of heavy images we can use icons which gives a better sense.

When we talk about font icons, we look for font awesome icons. Font awesome is a complete list of icons which are mostly used in websites. Here we will discuss how to import font awesome icons in your theme without the use of any plugin.
 

Import Font awesome Icons in WordPress

First, you have to create a child theme of your parent theme. Creating child theme is important because if any update on your parent theme comes to your files will not be affected. To know how to create a child theme in WordPress read our previous article.

You can import Font Awesome using two methods:
1. Using functions.php file.
2. Using header.php file.
 

1. Using functions.php file

First, you have to create a function.php file in your child theme folder.
 

 
Then you have to add a function in functions.php file to import your Font awesome icons. There are two methods of importing font awesome icons in your theme:

  • By using the link to Font Awesome icons CSS file in the functions.php file.
  • By locally download the Font awesome Zip file and then add a call to action function in functions.php file.
Using link of CSS file in functions.php
  • 1. Open functions.php file and paste below code:

    function wpb_load_fa() {
    wp_enqueue_style( 'wpb-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' );
    }
    add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );
Downloading Font Awesome zip file & link directory in functions.php
  • 1. Click on the download link on the font awesome icon homepage and download the zip file.
     

     
  • 2. When you download the zip file you will see the fonts and CSS file inside the zip file. Copy the fonts and CSS folder which you get in the zip file in the child theme folder.
     

     
  • 3. It’s time to add a function in functions.php file to load our stylesheet. Open the functions.php file and paste below code:

    add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
    function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'css/font-awesome.css.css' );
    }

 
Your Font awesome icons are now imported in your theme. You can use CSS classes(like for download icon class is ‘fa-download’) given in the cheat sheet in your HTML like below code:

<i class="fa fa-home" aria-hidden="true"></i>


 

2. Using header.php file

Download header.php file forms your parent theme.
 

 
Copy this file into your child theme folder.
 

 
There are also two methods of importing font awesome icons in your theme Using header.php:

  • By using the link to Font Awesome icons CSS file in the header.php file.
  • By locally download the Font awesome Zip file and then add a call to action function in header.php file.
Using link to CSS file in header.php
  • 1. Open header.php file and add following code to the head of the file.
     

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>

    See below screenshot also:
     


 

Downloading Font Awesome zip file & link directory in header.php

Do the same process to download and place the Font Awesome files in child theme folder as mentioned above.

  • 1. Open header.php file and add following code to the head of the file.

    <link rel="stylesheet" href="yourdomainname/wordpress/wp-content/themes/twentyseventeen-child/css/font-awesome.css"/>

    See below screenshot also:
     

Note: Use your actual domain name instead of using yourdomainname in the URL. Then only your file will load. Also, twentyseventeen-child option in the URL depends on whatever you give the name to your child theme. Place the name of your child theme whatever you were given.
 
You can also check How to add font awesome icons in custom menu in WordPress.

Spread the love

Kapil Garg

Kapil Garg has 7 years of experience in building professional websites. He is a leading web developer, web designer and Google adwords certified partner. His passion is to designed and developed most impressive websites.

Leave a Reply

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