{"id":46907,"date":"2015-04-15T02:10:58","date_gmt":"2015-04-15T06:10:58","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=46907"},"modified":"2016-02-17T06:46:24","modified_gmt":"2016-02-17T11:46:24","slug":"opencart-2-x-how-to-change-font-awesome-icons","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/opencart-2-x-how-to-change-font-awesome-icons.html","title":{"rendered":"OpenCart 2.x. How to change Font Awesome icons"},"content":{"rendered":"

\r\n

This tutorial will show you how to change Font Awesome icons in OpenCart 2.x. template.<\/p>\r\n

OpenCart 2.x. How to change Font Awesome icons<\/a><\/p>\r\n

    \r\n
  1. \r\n

    Inspect the icon using Firebug plugin<\/strong>. You can find information on how to use it here: Firebug. Mozilla Firefox plugin<\/a>. 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<\/strong>:<\/p>\r\n

    \"OpenCart.<\/a>\r\n<\/li>\r\n

  2. \r\n

    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++<\/strong> software. Open Notepad++ editor (you may download it at Notepad++<\/a>). Press CTRL+F<\/strong> and open the Find in Files<\/strong> 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<\/strong>:<\/p>\r\n

    \"OpenCart.<\/a>\r\n<\/li>\r\n

  3. \r\n

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

    \"OpenCart.<\/a>\r\n<\/li>\r\n

  4. \r\n

    Open the Font Awesome Cheatsheet<\/a>. There you will see a list of icons and their classes. Access the installation root of your site, open cart.tpl<\/strong> 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:<\/p>\r\n

    \"OpenCart.<\/a>\r\n<\/li>\r\n

  5. \r\n

    Clear browser cache and cookies and refresh the page. The modified icon will appear in case all the actions were performed properly:<\/p>\r\n

    \"OpenCart.<\/a>\r\n<\/li>\r\n<\/ol>\r\n

    This is the end of the tutorial. Now you know how to change Font Awesome icons.<\/p>\r\n

    Feel free to check the detailed video tutorial below:<\/p>\r\n

    OpenCart 2.x. How to change Font Awesome icons<\/a><\/p>\r\n

    <\/p>","protected":false},"excerpt":{"rendered":"

    This tutorial will show you how to change Font Awesome icons in OpenCart 2.x. template.<\/p>\n","protected":false},"author":61,"featured_media":46915,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1156],"tags":[688,1761,674,1157],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/46907"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/61"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=46907"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/46907\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/46915"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=46907"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=46907"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=46907"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}