Icons are symbolic images that are included on websites, usually through web fonts or vector images, so you can resize them to the dimensions you want without affecting their accuracy. Icons are distinguished by their ease of use, their small size compared to other types of images, and the presence of many free sources for them.
WordPress websites use icons just like any other website. Today, there are several ways in which icons can be included in a WordPress site. Most website creation plugins used in WordPress, such as Elementor and Gutenberg, allow you to use these icons within them either through a ready-made widget or through the use of a short code or HTML code.
Through this article, we will explain how to add the icons you want to your site and how to control their size and color in several ways. Thus, you can modify them regardless of the method used to add them, so read on to learn more about icons and the most commonly used sources to obtain them for free.
Where can I find icon fonts ?
Font Awesome is the most popular and widely used source for icons. It has more than 1,400 free icons, in addition to more than 4,500 icons in the paid version. Therefore, you can find an icon for anything within this resource, such as (social media icons, stock icons, graphical interface component icons, etc.)
There are also many other sources of icons, such as IcoMoon and Fontello .
Three ways to add icons in WordPress
In the following paragraphs, we will explain three ways to include icons on a WordPress site, starting from the easiest to the most difficult, through ready-made plugins or through code.
It should be noted that the methods that use additions are that you can use them to add icons within the content of the page or article easily, but if you want to change an icon or add an icon to a place that the editor cannot access.
Therefore, in order to control the icons more, you need some experience in modifying the code using HTML and CSS , because you will need to determine where to add the code within your site’s files so that you can adjust the size, color, location of the icon, and other specifications.
1- AUse a WordPress plugin to add icons
This method is the fastest and easiest for anyone who is a beginner in using WordPress, but as we mentioned, it does not allow you to customize the icons or use these icons except in places where you can add a short code to them, that is, in the body of the page, the body of the article, and sometimes the footer as well.
Let’s start now with the steps to use this method:
1-You must first install the Font Awesome add-on on your site.
You can install this plugin by logging into the WordPress control panel, then clicking on the Add New tab within the Plugins section, searching for the name of the plugin Font Awesome in the search box as shown in the following image, then clicking on Install and then Activate.
2- After successfully activating the plugin, now go to any article or page on the WordPress website and add the Short Code component, then write the name of the icon as follows in the text box [icon name=”rocket”] .
The short code for the icon can be used alone, as in the previous example, or written with any text accompanying the icon, as shown in the following image:
3-You can now preview the article or page to see what the icon looks like within the site where the previous icon appeared as shown in the image.
There is a huge library of icons that you can use on your site through this add-on, but as you notice, you must first know the name of the correct icon that you want to use, and this is easily possible through the following link .
2- Use the page builder plugin in WordPress
Elementor is one of the most popular and easy-to-use page builder plugins. The plugin comes with several components that allow you to easily use icons such as the icon element.
1- Go to any page or article designed using Elementor on your site and click on Edit with Elementor , and the site will start loading the page within the editor.
2- Search using the menu on the right of the page for the icon item , then drag it to the body of the page as shown in the following image.
Elementor also uses the Font Awesome font library implicitly so this way you will be able to use the same icons as in the previous method.
In this icon element, you can control the size of the icon, rotate it, and change its color without the need to use any CSS or HTML code. Therefore, if you are using the Elementor plugin on your site, this method is considered very suitable.
3- Add the font manually and display the icon using HTML code
Many WordPress users do not like to use a lot of plugins in order to maintain the site’s performance and speed, so we will talk here about how to add or download the Icon Fonts library to your site and then add an icon from it through HTML code.
Note : If your site already uses a plugin that loads the font library you want to use, there is no need for the step associated with calling the library. So I will explain how to add the Font Awesome library without adding. But first you need to check if your site already has this library
How do I know if my site uses the Font Awesome icon font library?
You can find out by visiting the site, using Google Chrome developer tools, then going to the Network tab and reloading the page.
The set of files that the page uploaded will appear. If you find a file named fontawesome among the CSS files , this means that you can skip the next step to add the icon font library.
If you need to add this library, you must go to the Font Awesome website and click on Start, then enter your email and create an account so that you can get a link to add the files of this library to your site through their CDN as follows:
You must then copy the previous code and paste it into the <head> tag of your site. So that the matter does not seem complicated to you, I will use the Insert Headers and Footers add-on here to facilitate this task.
Install and activate the add-on, then head to the Settings section . You will find a new tab called Insert Headers and Footers . Paste the previous code into the header section and click the save option . Thus, the Font Awesome font library will be downloaded every time you visit a page of your site.
Now go to the Font Awesome icon library and choose the icon you want to add, then click on it. You will be redirected to a page displaying this icon in multiple sizes and backgrounds.
Click on the Start Using This Icon option , and a pop-up window will appear that includes an HTML tag that you must copy as it is.
Now go to any article or page and add an HTML component, then paste the previous code into it to become as follows.
Click Preview to see how the previous icon appears to the user, as shown in the following image.
The purpose of this method is not to add the icon to articles or pages in this way, but the purpose of the previous step is to show you that the library is working correctly, and you can now add these icons within any code file and anywhere you want within your site.
The steps you followed here are the same as the steps provided by the Font Awesome add-on , and this mechanism applies to any icon library you want to add, so you can now use the icons you like, whatever their source, as long as it is free.
Thus, in today’s article, we have learned about several ways to use icons in WordPress, whether through plugins or through the use of code, and we have learned about how to add an icon library to your site and enjoy its features.
We advise you to adopt the method of using and customizing icons on your site, as articles that contain icons are considered more visually attractive than articles that rely on text alone.
But you should be careful if you use several libraries within your site, as this will increase the size of the downloaded font files and CSS files, and this will somewhat affect the site’s speed and responsiveness, so make sure not to download the library more than once, as we explained in the article.
