The era of using images for several parts of your site no longer exists, because it is taken over by the introduction of using icons – in the form of fonts. Yes, you can now easily use fonts to insert icons (regardless of the size) into your websites. There are many benefits of using the same – the site speed reduction being the most beneficial one. In this article, we shall take a look at all the benefits of using icons rather than using images, and how we can integrate the same into WordPress. We’ll be using Font Awesome Icons (a free and open-source icon package) in this tutorial, and you’ll hence learn how to add Font Awesome Icons to WordPress. Not to forget that it was Dave Gandy who developed Font Awesome (thanks Dave!). To begin with, here are a few benefits of using Icons over images –
Font Awesome icons can be seamlessly integrated by using the above WordPress Plugin. It is a plugin developed by Rachel Baker – and many people not possessing the knowledge of some CSS & HTML still thank her. Once activated, adding the icons is pretty easy. The process of adding the same is explained on the plugin’s page as well.
If you want to cut down the effort of extracting-uploading-testing some stuff, using the plugin is ideal for you. However, if you love some work and are ready to spend some minutes, you’re advised to follow the second method.
You’ll need to work a bit here. It is not at all hard – nor time-consuming. But you’ll just need to do some a bit. Follow these steps, and you should be using the icons in no time.
Download the icon package. The best way is to go to FontAwesome.com and hit the “Start for Free” button to download it for free.
Upload it (as it is, after unzipping) to your theme or the child theme’s directory.
Add the following lines of code, as applicable.
If you’re able to easily edit the
If you don’t have access to easily edit them
You can follow any of the above two ways to add Font Awesome Icons to your WordPress site. Any questions/queries? The comments section is open.
Why Use Icons Over Images?
There are plenty of reasons why one should use icons on websites rather than using images. Following are a few.- Site Speed – You surely know that every image that is loaded on the page needs a server request, hence making the site loading speed very slow. You should always find ways to increase site speed and not make it slow.
- Consistency – Any project/site/presentation always looks good if consistent use of media is practiced. For example, all the videos in a video series having the same presentation styles will look more professional than each one having different styles.
- Easy to integrate – Images often have alignment issues, and sometimes do not align as required. However, icons are integrated inline – and used just like any other text on the page.
- Storage Space – Although not too much, images take up space on the server. The higher the number, the larger the space required. However, icons are just integrated once and that’s it – no further space occupied.
How To Add Font Awesome to WordPress
As mentioned above, this tutorial will teach you how to add Font Awesome icons directly to your WordPress-based site. Although there are a few open-source icon packages available, Font Awesome is one of the easiest and best packages out there. There are two ways in which you can add Font Awesome icons to WordPress, and both are explained below –1) Using The WordPress Plugin
Link to Plugin – Font Awesome WordPress PluginFont Awesome icons can be seamlessly integrated by using the above WordPress Plugin. It is a plugin developed by Rachel Baker – and many people not possessing the knowledge of some CSS & HTML still thank her. Once activated, adding the icons is pretty easy. The process of adding the same is explained on the plugin’s page as well.
If you want to cut down the effort of extracting-uploading-testing some stuff, using the plugin is ideal for you. However, if you love some work and are ready to spend some minutes, you’re advised to follow the second method.
2) Manually – From The GitHub Repository
Link to the Git – Font Awesome on GitHubYou’ll need to work a bit here. It is not at all hard – nor time-consuming. But you’ll just need to do some a bit. Follow these steps, and you should be using the icons in no time.
Download the icon package. The best way is to go to FontAwesome.com and hit the “Start for Free” button to download it for free.
Upload it (as it is, after unzipping) to your theme or the child theme’s directory.
Add the following lines of code, as applicable.
If you’re able to easily edit the
<head> section of your site, then add the following to the section.<link href="http://link-to-the-css-file.css" rel="stylesheet">If you don’t have access to easily edit them
<head>, you can then open the theme’s functions.php file and add the following line of code.wp_enqueue_style('my-fontawesome-icons', "http://link-to-the-css-file.css");You can follow any of the above two ways to add Font Awesome Icons to your WordPress site. Any questions/queries? The comments section is open.
Last edited:
