Each template package contains the pack of specific icons, which you can use at your website.
Some new templates already have additional “Icons” page where you can check the list of available icons. Usually, you can find it under “Components” or “Pages” submenu.
Alternatively, you can check how your icons look like at the official https://www.flaticon.com/ website.
Flaticons have different packs, so, first of all, you need to check which one is used in your case.
In order to do this you need to check the name of flaticons file, open “site/css” folder from your template package, and you will see, for example, “fl-glypho.css” file there.“Fl” – means that those icons are Flaticons, and “glypho” is your specific pack name. Open the https://www.flaticon.com/ website and type “glypho” in the search bar to see how the icons look like.
Let’s check closer how those icons can be replaced:
- Inspect the icon you need to replace using any developer tool in your browser. You will see the icon class in HTML code. In order to change the icon, you need to replace that class with a new icon class name. Class of the new icon which you want to use can be found in css/fl-XXX.css file, where XXX stands for the exact icons pack title.
- Open an appropriate .html page in any code editor tool (for example, Notepad++ or Sublime Text).
- Search for the icon class which you have found on the first step of this guide using editor’s search function (usually it is Сrtl+F hotkey). Then, replace that class with a needed icon class (you need to add the class title without the full stop symbol “.”) .
- Save the changes, re-upload the .html file at your server and check the page. The icon has changed!
Now you know how to manage Flaticon icons in HTML template.
