Ever you see some websites using beautiful icons in content that caught your attention. In this blog we will tell you how you can add beautiful and stunning icons in your wordpress website with 2 easy methods.
You can easily add font awesome icons in wordpress by using a simple plugin or manually by using code.
What is font awesome?
Font awesome is a popular icon and toolkit that is used by millions of designers and developers. The icons in Font Awesome are vector-based, which means they can be resized without losing quality and can be styled using CSS properties such as color, size, shadow, and more.
Why should you use font awesome icons in your website?
Using font awesome icons in your website makes your user experience more attractive that provide following benefits:
Performance Advantage:
Font awesome has a performance advantage. We all love those websites that load fast. All the font awesome icons are included in a single file so it only takes a single request from the server to load all the icons in a single click.
Browser Compatibility:
We do not need to worry about browser compatibility for font awesome icons. It is well supported by all major and modern browsers with all file formats like ( ttf, eot, svg, woff ). It is considered the same as other web fonts.
How to manually add font awesome in wordpress without use of any plugin
Step1: Download font awesome kit
The first step is to download the font awesome kit from the official site of font awesome.
Step2: Create icons folder in WP-CONTENT
The second step is to open your cpanel and create an ICON named folder in the wp-content folder.
Step3: Upload font awesome to Cpanel
The third step is to upload font awesome kit to icon folder that you recently created in WP-CONTENT Folder.
Step4: Add this code to functions.php
The last and final step is to paste this code in your function.php file of your wordpress theme. For best practise we suggest you to create a child theme in your wordpress website & make sure your css is loading properly in your website
add_action( 'wp_enqueue_scripts', 'shaighan_enqueue_fontawesome' );
function shaighan_enqueue_fontawesome() {
wp_enqueue_style('shaighan-font-awesome', 'https://shaighankhalid.com/wp-content/icon/font-awesome');
}
Note: Don’t forget to replace the url from wp_enqueue_style
If you are using any cache plugin in your wordpress website don’t forget to clear the cache.
How to add font awesome icons in wordpress website using a plugin.
In this step we will tell you how you can add font awesome icons to a wordpress website without any code knowledge by using a simple plugin. Here are the steps:
Step1: Download the plugin:
In the first you need to login to your wordpress dashboard and click on plugins>AddNew and search for Font awesome plugin. After your download the font awesome plugins click on activate
Step1: Save the setting:
Once you download and activate the plugin in your wordpress website. You need to do some small setting.
If you are using free version click on free > web fonts & save the setting.