{"id":72635,"date":"2016-07-01T09:05:10","date_gmt":"2016-07-01T13:05:10","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=72635"},"modified":"2016-07-20T06:32:04","modified_gmt":"2016-07-20T10:32:04","slug":"opencart-2-x-how-to-manage-material-design-icons","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/opencart-2-x-how-to-manage-material-design-icons.html","title":{"rendered":"OpenCart 2.x. How to manage Material Design icons"},"content":{"rendered":"<p>The following tutorial shows how to manage Material Design icons in OpenCart 2.x templates<\/p>\r\n\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/UEbSVmB-tHY\"><\/iframe>\r\n<\/div>\r\n<div>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons1-300x169.png\" alt=\"OpenCart_2.x.How_to_manage_Material_Design_icons1\" width=\"300\" height=\"169\" class=\"alignnone size-medium wp-image-72636\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons1-300x169.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons1-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons1-1024x576.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons1.png 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/div>\r\n<p>In order to replace demo icons with the needed ones you should perform the following steps:<\/p>\r\n<ol>\r\n\t<li><p>Inspect the icon using Firebug add-on for Firefox (or any other developers tool). Here you can find a detailed instruction on installing Firebug and working with it: <a href=\"\/help\/firebug-mozilla-firefox-plugin.html\" target=\"_blank\">Firebug. Mozilla Firefox plugin<\/a>. In order to change the icon, locate the CSS rule where the icon is added:<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons2-300x169.png\" alt=\"OpenCart_2.x.How_to_manage_Material_Design_icons2\" width=\"300\" height=\"169\" class=\"alignnone size-medium wp-image-72637\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons2-300x169.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons2-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons2-1024x576.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons2.png 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t\r\n\t<p>In order to replace a demo icon with a desired one, you need to change the <strong>content<\/strong> value in this CSS rule.<\/p><\/li>\r\n\t<li><p>Open your site files via FTP or File Manager in your hosting admin panel and navigate to the <strong>\/catalog\/view\/theme\/themeXXX\/stylesheet<\/strong> directory. Locate the <strong>material-icons.css<\/strong> file. Here you can find the codes of all the available material icons.<\/p><\/li>\r\n\t<li><p>Select the needed icon and copy it&#8217;s code:<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons3.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons3-300x169.png\" alt=\"OpenCart_2.x.How_to_manage_Material_Design_icons3\" width=\"300\" height=\"169\" class=\"alignnone size-medium wp-image-72638\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons3-300x169.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons3-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons3-1024x576.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons3.png 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t<\/li>\r\n\t<li><p>Get back to your site and paste this code in the CSS rule mentioned above, add <strong>!important<\/strong> as well. If the code is added correctly, you will see the icon changed:<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons4.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons4-300x169.png\" alt=\"OpenCart_2.x.How_to_manage_Material_Design_icons4\" width=\"300\" height=\"169\" class=\"alignnone size-medium wp-image-72639\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons4-300x169.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons4-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons4-1024x576.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons4.png 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n<li><p>Right click over the rule and select a <strong>Copy rule declaration<\/strong> option:<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons5.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons5-300x169.png\" alt=\"OpenCart_2.x.How_to_manage_Material_Design_icons5\" width=\"300\" height=\"169\" class=\"alignnone size-medium wp-image-72640\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons5-300x169.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons5-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons5-1024x576.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons5.png 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\r\n<\/li>\t\r\n<li><p>After doing this navigate to <strong>catalog\/view\/theme\/themeXXX\/stylesheet\/<\/strong> directory again and open <strong>stylesheet.css<\/strong> file. Paste the rule to the bottom of the file and save the changes:<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons6.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons6-300x169.png\" alt=\"OpenCart_2.x.How_to_manage_Material_Design_icons6\" width=\"300\" height=\"169\" class=\"alignnone size-medium wp-image-72641\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons6-300x169.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons6-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons6-1024x576.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons6.png 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\r\n<\/li>\r\n<li><p>Open your website and refresh the page.In some cases you will also need to clear your browser cache to see the changes.<\/p><\/li>\t\r\n<\/ol>\r\n\r\n<p>You have successfully replaced Material Design icon in your OpenCart 2.x. template.<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons7.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons7-300x169.png\" alt=\"OpenCart_2.x.How_to_manage_Material_Design_icons7\" width=\"300\" height=\"169\" class=\"alignnone size-medium wp-image-72642\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons7-300x169.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons7-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons7-1024x576.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/OpenCart_2.x.How_to_manage_Material_Design_icons7.png 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=UEbSVmB-tHY?width=1280&amp;height=720\" rel=\"prettyPhoto\">OpenCart 2.x. How to manage Material Design icons<\/a>","protected":false},"excerpt":{"rendered":"<p>The following tutorial shows how to manage Material Design icons in OpenCart 2.x templates.<\/p>\n","protected":false},"author":88,"featured_media":72643,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1156],"tags":[811,2345,2285],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/72635"}],"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\/88"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=72635"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/72635\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/72643"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=72635"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=72635"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=72635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}