On the Theme Options of some of my themes you will find options with the names "Button1 Icon", "Button2 Icon", "Button3 Icon" and so on.
Thes options are responsible for defining the icons that are seen in the menu of the theme (as shown in the first image of this post).
But what to do when you want to modify or remove these icons? Well, this is what I will be teaching in this tutorial.
First of all, using these icons is optional, so if you don't want to include icons in the menu of your theme, simply leave the text field of these options empty:
Step 1: How do icons work?
The icons used in my themes are vector shapes. Basically, they look like images, but behave as characters: you can change their color and size without affecting their visual quality. There are many kits of icons like this out there created by different developers that can be installed and used in any theme.
To make the customization of my themes easier I make them available with some icon kits already installed, this way you have several options to chose from without needing to directly change anything in the HTML of the theme. The kist that come already installed on my current themes are: FontAwesome (version 5.15.4), LinearIcons e CappuccIcons.
But if you don't like any of these kits you can, of course, research for and install other kits. The way to install these kits isn't always the same for all of them, so I won't be teaching how to do that here, but the websites that put these kits available for download usually also provide a guide/tutorial on how to install them in your code.
Step 2: Where to find the icons?
Each icon from each kit has its own unique name and you need to know them to be able to use them. And to get them, you need to access the catalog of each kit and copy them name of the desired icons.
⚠ And by the way, some of these kits have two versions: a free one and a Premium one. My themes only come with the free version of these kits already installed, so you can only use the icons in their free versions. If you try to use the icons that belong to the Premium versions, they simply won't work.
Here are the links to the catalogs from the kits that already come installed in my themes:
In some of these catalogs you will find the HTML code or the name for every icon right in front or below them, in others you need to click on the icons to see their codes/names.
(In the image above: the texts indicated by the red arrows are the names of the icons being shown.)
The codes can appear written in slightly differnt ways in each catalog, but all of them work being written the following way:
<i class="icon-name"></i>Or:
<span class='icon-name'></span>So, all you need to do is copy one of these little codes above (it doesn't matter which, both work exactly the same way) and replace the part where I wrote icon-name with the name of the icon of your choice. And also for each kit, you need to include the ID of this kit before the name of the icon, which are:
- For FontAwesome: the code of the icons must include before their names:
fas fa-(for icons that belong to the "solid" style of the kit);far fa-(for icons that belong to the "linear" style of the kit);- or
fab fa-(for icons from the kit that are brand logos).
- For LinearIcons: the code of each icon must include "
lnr lnr-" before their names. LinearIcons' website also already gives you the complete HTML code for each icon, so you can just copy and paste; - For CappuccIcons: the code of each icon must include "
cp cp-" before their names.
Here goes an example; the following code will show the Home icon from FontAwesome:
<i class="fas fa-home"></i>Another example; the following code will show the Ice Cream icon from CappuccIcons:
<i class="cp cp-ice-cream"></i>Step 3: How to edit the icons in the theme?
Now that you already know where to find the codes of the icons, you just have to go to the Theme Options and type/paste them in the correct options for icons. The icon options are usually named as "Button Icon", "Title Icon" or anything with "Icon" in front of it:
Actually, you can put icon codes in any option from the theme that accepts text. Some themes already come with specific spaces for icons, but if you want, for example, to put icons in the menu of a theme that doesn't include proper spaces for icons in the menu, you can simply put the code of the icons before (or after) the text that will be the title of the button, in the same text option, like this:
(In the image above: the title of the button is highlighted in blue and the code of the icon is highlighted in red.)
Just don't forget that the theme you're using must contain the icons kit you want to use installed in it. If it doesn't, it doesn't matter where you include the HTML of the icons, they will never work. But once they are installed, they will work anywhere in the theme.
For my old themes:
If you're using any of my old themes (don't forget they are no longer getting updates), it might not have any icon kit installed, specially the oldest ones. But for those tha come with some kits, the icons need to be configured differently on them.
If you are using one of my old themes and, in its Theme Options, it includes options to add icons, then it means that this theme contains the FontAwesome and LinearIcons already installed, and maybe CappuccIcons too. And to edit the icons in these themes, you can not put the full HTML code of the icons you want to use, but only their names followed by the ID of their kits, like this:
- If you have any question, don't hesitate on asking. You can send me a quick message in here.
