PrestaShop 1.6.x. How to change Font Awesome icons

This tutorial provides an explanation of how to change Font Awesome icons in Prestashop 1.6.x.

PrestaShop 1.6.x. How to change Font Awesome icons

1. Inspect the icon using a developer tool in your browser, for example Firebug (for Mozilla Firefox), to check how it is set up. You can find information on how to use Firebug plugin here.

2. In our case we can see that the icon is assigned to this CSS selector:

   					.shopping_cart > a:first-child::before
   				

   

3. In order to change the icon, you need to modify the respective file where the icon code is located. You can also see the path to this file with Firebug. Or right click on the file name in Firebug and select Copy Location. Paste the copied link to Notepad or any other text editor on your computer, and you will see the absolute path to this file:

   

4. In our case we need to edit the CSS code on the line 33 in the blockcart.css file located in
   themes/themeXXXX/css/modules/blockcart/ directory on the server. To edit the file, log into your cPanel.

5. Locate the File Manager and go to your website folder (you can perform the next steps via your FTP as well).

6. Navigate to themes/themeXXXX/css/modules/blockcart/ directory and open the blockcart.css file:

   

7. Locate the appropriate line (in our case line 33) in the blockcart.css file. You will see the same code you saw in Firebug:

   					.shopping_cart > a:first-child:before {
   						content: "\f07a";
   						position: absolute;
   						font-family: "FontAwesome";
   						display: inline-block;
   						font-size: 36px;
   						font-weight: 400;
   						color: #fbdd12;
   						left: 2px;
   						top: 6px;
   						-moz-transition: all 0.2s ease;
   						-o-transition: all 0.2s ease;
   						-webkit-transition: all 0.2s ease;
   						transition: all 0.2s ease; }
   				

   Our icon has \f07a code value assigned to the content CSS property:

   

8. You can use this Font Awesome icons reference in order to pick another icon and find its respective code value. Also, you can use search engines in order to find it.

9. Let’s pick the gift icon. Click on the icon link and locate its Unicode value. Copy the value which is f06b. Please note that not all icons may show up, as the newly added Font Awesome icons may not have styles in the template files:

   

10. Go back to the blockcart.css file. Replace the existing icon code with the one you have copied. Do not remove the backslash before the code value. In our case the final code for the content property should look like this:

    					content: "\f06b";
    				

    

11. Save your changes and refresh your website to review them. The icon has been changed:

    

Now you know how to change Font Awesome icons in Prestashop 1.6.x.

Feel free to check the detailed video tutorial below:

PrestaShop 1.6.x. How to change Font Awesome icons