Front WordPress Theme uses Font Awesome icons, and some custom made SVG icons. We’ve listed all the icons available to use with Front WordPress Theme here:
http://docs.madrasthemes.com/front/topics/faq/icons/.
If you want to use an icon that is not available, you can use a custom icon from its SVG source file. For example, let’s say I want to use these two icons from the FlatIcon website. I will go ahead and download the SVG formats of these two icons.
I will open the SVG files and will set the width and height. I will also remove all tags outside of the <SVG> tag and some other unnecessary tags. With the Safe SVG plugin activated, I can now upload these two SVG files to my website’s media library. Once uploaded, I will note down the complete URL of the two SVG files.
Now, we’ll navigate to Appearance > Theme Editor. We are using the Front Child Theme to add all our customizations. The child theme will make sure that you do not lose your customizations during updates. So please use a Child Theme for all your customizations.
We’ll now edit the child theme’s functions.php file and add the custom code to add custom SVG icon. The link to the custom code is in the description. After adding the custom code, I will modify the icon name and icon path. The icon name should be unique, and the path is the URL of the SVG file that we’ve copied after uploading it to the media library. We now click on the Update File button to save our custom changes. Now, these two icons are available to the Front Icon Controller.
Let’s edit the Classic Marketing home page, which has an Icon Center Gutenberg Block. In the Icon Setting, I can now give the prefix, which is fgb, and the icon name I’ve chosen. We have now successfully added custom SVG icons to our website.
If you are facing any issues while adding a custom SVG Icon to Front WordPress Theme, please do not hesitate to reach our support team. We are happy to help.
Thanks for watching, and have a good day!