{"id":75361,"date":"2016-08-30T10:43:57","date_gmt":"2016-08-30T14:43:57","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=75361"},"modified":"2016-10-07T06:05:04","modified_gmt":"2016-10-07T10:05:04","slug":"prestashop-1-6-x-manage-flaticon-icons","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/prestashop-1-6-x-manage-flaticon-icons.html","title":{"rendered":"PrestaShop 1.6.x. How to manage Flaticon icons"},"content":{"rendered":"<p>Hi there! This tutorial will guide you on how to change Flaticon icons in <a href=\"https:\/\/www.templatemonster.com\/prestashop-themes.php\"target=\"_blank\" title=\"PrestaShop Themes\">PrestaShop based templates<\/a>.<\/p>\r\n\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/ObsnhLfEoz0\"><\/iframe>\r\n<\/div>\r\n\t<ol>\r\n\t\t<li><p>Inspect any icon with Firebug. You will see that there is a CSS class which defines which icon shows up. We will use that CSS class to find the other ones in <strong>global.css<\/strong> file.<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/08\/PrestaShop-1.6.x.-How-to-manage-Flaticon-icons1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/08\/PrestaShop-1.6.x.-How-to-manage-Flaticon-icons1-300x175.png\" alt=\"PrestaShop 1.6.x. How to manage Flaticon icons1\" width=\"300\" height=\"175\" class=\"alignnone size-medium wp-image-75363\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/PrestaShop-1.6.x.-How-to-manage-Flaticon-icons1-300x175.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/PrestaShop-1.6.x.-How-to-manage-Flaticon-icons1-150x87.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/PrestaShop-1.6.x.-How-to-manage-Flaticon-icons1-768x447.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/PrestaShop-1.6.x.-How-to-manage-Flaticon-icons1-1024x596.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/PrestaShop-1.6.x.-How-to-manage-Flaticon-icons1.png 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t\t\r\n\t\t<\/li>\r\n\t\t<li><p>As you can see, the theme has 20 different Flaticon icons. Choose any of those classes and copy it.<\/p><\/li>\r\n\t\t<li><p>Now navigate to <strong>Modules and Services > Modules and Services<\/strong>. Locate the <strong>Theme Configurator<\/strong> module and open it for editing.<\/p>\r\n\t\t\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/08\/PrestaShop-1.6.x.-How-to-manage-Flaticon-icons2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/08\/PrestaShop-1.6.x.-How-to-manage-Flaticon-icons2-300x162.png\" alt=\"PrestaShop 1.6.x. How to manage Flaticon icons2\" width=\"300\" height=\"162\" class=\"alignnone size-medium wp-image-75364\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/PrestaShop-1.6.x.-How-to-manage-Flaticon-icons2-300x162.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/PrestaShop-1.6.x.-How-to-manage-Flaticon-icons2-150x81.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/PrestaShop-1.6.x.-How-to-manage-Flaticon-icons2-768x415.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/PrestaShop-1.6.x.-How-to-manage-Flaticon-icons2-1024x554.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/PrestaShop-1.6.x.-How-to-manage-Flaticon-icons2.png 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t\t\r\n\t\t<\/li>\r\n\t\t<li> <p>Scroll down to see the editable tabs and open the first one which contains the first icon we will replace with ours. Replace the first class with the one you copied before.<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/08\/PrestaShop-1.6.x.-How-to-manage-Flaticon-icons3.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/08\/PrestaShop-1.6.x.-How-to-manage-Flaticon-icons3-300x159.png\" alt=\"PrestaShop 1.6.x. How to manage Flaticon icons3\" width=\"300\" height=\"159\" class=\"alignnone size-medium wp-image-75362\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/PrestaShop-1.6.x.-How-to-manage-Flaticon-icons3-300x159.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/PrestaShop-1.6.x.-How-to-manage-Flaticon-icons3-150x80.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/PrestaShop-1.6.x.-How-to-manage-Flaticon-icons3-768x408.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/PrestaShop-1.6.x.-How-to-manage-Flaticon-icons3-1024x544.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/PrestaShop-1.6.x.-How-to-manage-Flaticon-icons3.png 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t\t\t\r\n\t\t<\/li>\r\n\t\t<li><p>Save changes, refresh your home page and check the results.<\/p><\/li>\r\n\t<\/ol>\r\n\t<p>Nicely done, the icon was successfully changed. Feel free to leave a comment or ask a question.<\/p>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=ObsnhLfEoz0?width=1280&amp;height=720\" rel=\"prettyPhoto\"><a href=\"https:\/\/www.templatemonster.com\/properties\/prestashop-compatibility\/1-6-x\/\"target=\"_blank\"title=\"PrestaShop 1.6.x templates\">PrestaShop 1.6.x.<\/a> How to manage Flaticon icons<\/a>","protected":false},"excerpt":{"rendered":"<p>Hi there! This tutorial will guide you on how to change Flaticon icons in PrestaShop based templates.<\/p>\n","protected":false},"author":108,"featured_media":75365,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[732],"tags":[2379,552,1693],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/75361"}],"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\/108"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=75361"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/75361\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/75365"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=75361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=75361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=75361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}