If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

OpenCart 2.x. How to change Font Awesome icons

This tutorial will show you how to change Font Awesome icons in OpenCart 2.x. template.

OpenCart 2.x. How to change Font Awesome icons

  1. Inspect the icon using Firebug plugin. You can find information on how to use it here: Firebug. Mozilla Firefox plugin. Take a look at CSS code structure. This kind of 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 fa fa-shopping-cart:

    OpenCart. How to change Font Awesome icons1.jpg

  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 Notepad++). 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:

    OpenCart. How to change Font Awesome icons2.jpg

  3. We can see the list of files where the fa fa-shopping-cart was found. In our case the icon should be changed in catalog\view\themeXXX\template\common\cart.tpl file (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:

    OpenCart. How to change Font Awesome icons3.jpg

  4. Open the Font Awesome Cheatsheet. There you will see a list of icons and their classes. Access the installation root of your site, open cart.tpl and edit it: just copy the class name and replace the original class name with it, save the changes. 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:

    OpenCart. How to change Font Awesome icons4.jpg

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

    OpenCart. How to change Font Awesome icons5.jpg

This is the end of the tutorial. Now you know how to change Font Awesome icons.

Feel free to check the detailed video tutorial below:

OpenCart 2.x. How to change Font Awesome icons