How To Add Font Awesome Icons in WordPress

0

Before adding Font Awesome Icons in your WordPress website, let’s get to know about it. Font Awesome is a GPL friendly font and icon toolkit that is based on CSS and LESS. It is an inline element that is widely used for icons. Users should know that if the font-size or color of the icon container is changed the icon changes automatically. Generally, WordPress Users add Font Awesome in the website as it has a superb library of vector icons. Font Awesome has almost every brand and shape to meet your needs.

 Due to its effective features with popular icons and logos its use is growing rapidly. See the image below to see the Font Awesome Usage Statistics growth rate in different WordPress websites.  

Image Source: built With
Image Source: built With

In this WordPress tutorial, we will learn to Add Font Awesome Icons in WordPress using different Methods and their respective steps. 

Method 1: By using a WordPress Plugin

Step: 1 

  • First of all, you need to Install a WordPress Plugin. I am Installing Font Awesome plugin. But, you can Install anyone per your wish and need. 
  • To Install a WordPress Plugin Login to the Dashboard of your site. Click on the button Plugins >> Add New. Search for the Plugin that needs to be installed. After getting it, Click on the button Install Now >> Activate. In case of doubt go through install a new plugin for further more instructions. 
Add Font Awesome Icons in WordPress.
Add Font Awesome Icons in WordPress.

Step: 2

  • After Installing the plugin you will have access to [[icon name]] shortcode and HTML. Click on the button Font Awesome at the Settings option located in the left bar of the page. Web font or SVG option will be given to use. Make sure to choose the SVG option. 
Add Font Awesome Icons in WordPress.
Add Font Awesome Icons in WordPress.

Step: 3

  • Now, using Font Awesome is really very simple. Just add <i class=”fab fa-wordpress”></i> in the place where you want to make your icon appear. 

Method II: Adding Font Awesome Manually in WordPress

Step: 1

  • It’s genuinely much easier to add Font Awesome Icons manually by adding a little bit of code in your theme.
  • Click on the Editor Menu under the Appearance button. 
Add Font Awesome Icons in WordPress.
Add Font Awesome Icons in WordPress.

Step: 2

  • Now, on the right-hand side of the screen Click on the ‘Theme Functions’ link. Then, Copy and Paste the code mentioned below into Theme’s 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’ );}

Step: 3

  • Don’t forget to Click on the button ‘Update File’ Else the changes won’t be saved. 
  • Nowadays you can also use HTML code to show the icons in your site. Simply copy and paste the code given below. 

<i class=”fab fa-github-square”></i>

Wrapping Up

Font Awesome Icons takes just a few minutes to set up. Once it is in use it can insert and style almost every font. We hope this Step by Step WordPress Tutorial helped you to Add Font Awesome Icons in WordPress. WordPress Beginners are requested to use the plugin method as it doesn’t require any coding knowledge. 

Please leave your suggestion, question, and recommendations in the comment section below. Please Like our Facebook page and Follow us on Twitter for more information and blogs.  

Also, Checkout, 

LEAVE A REPLY

Please enter your comment!
Please enter your name here

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