PrestaShop 1.5.x. How to change Font Awesome icons

This tutorial shows how to change Font Awesome icons in PrestaShop 1.5 templates.

PrestaShop 1.5.x. How to change Font Awesome icons

1. Inspect the icon using the Firebug plugin. You can find information on how to use Firebug plugin here. Take a look at CSS code structure. This kind of CSS structure means that Font Awesome icons are used in the template. In order to change an icon, we need to locate the icon class and change it in template files. In our case the icon class is icon-shopping-cart.

   

2. Copy the class name and look for this code in all template files. The best way to search for the code is by using Notepad++ software. Open Notepad++ editor (you may download it at http://notepad-plus-plus.org/). Press CTRL+F and open the Find in Files tab. Select the theme folder (with all theme files), make sure that you have the same options as in the search window on the screenshot and press Find All.

   

3. We can see the list of files in which the icon-shopping-cart code was found. In our case the icon should be changed in blockuserinfo, so we are going to perform the changes in this file. In this case, themes\theme786\modules\blockuserinfo\blockuserinfo.tpl should be modified (in your case, the location of the file and its name can be different). Please note that you should change the class name in .tpl or .php files only.

   

4. Open the Font Awesome Cheatsheet page. There you will see a list of icons and their classes. Just copy the class name and replace the original class name with it. Please note that not all icons may show up, as the newly added font awesome icons may not have styles in the template files. You can check the modified code on the screenshot below. Save the changes, upload the modified file and accept the file replacement.

   

5. Clear browser cache and cookies, clear PrestaShop cache and refresh the page. The modified icon will appear in case all the actions were performed properly.

   

Feel free to check the detailed video tutorial below:

PrestaShop 1.5.x. How to change Font Awesome icons