{"id":71633,"date":"2016-06-02T10:23:53","date_gmt":"2016-06-02T14:23:53","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=71633"},"modified":"2020-02-06T10:39:13","modified_gmt":"2020-02-06T15:39:13","slug":"landing-page-how-to-change-flaticon-icons","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/landing-page-how-to-change-flaticon-icons.html","title":{"rendered":"Landing Page. How to change Flaticon icons"},"content":{"rendered":"<p>This video tutorial is going to show you <strong> how to Change Flaticon icons<\/strong> in <strong><a href=\"https:\/\/www.templatemonster.com\/landing-page-templates.php\" target=\"_blank\">Landing page templates<\/a>.<\/strong><\/p>\r\n<div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/QLmA4YIUS3U\"><\/iframe>\r\n<\/div>\r\n\r\n<ol>\r\n\t<li>\r\n\t <p>Inspect the icon using the <strong>Firebug<\/strong> or any other <a href=\"\/help\/developer-tools.html\" target=\"_blank\">developer&#8217;s tool<\/a>.<\/p>\r\n\t \r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-1-300x164.png\" alt=\"Landing_Page-How_to_change_Flaticon_icons-1\" width=\"300\" height=\"164\" class=\"alignnone size-medium wp-image-71634\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-1-300x164.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-1-150x82.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-1-1024x559.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-1.png 1267w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t<\/li> \r\n\t\r\n\t<li>\r\n\t <p>For example, if you want to replace the Notebook Icon with Cart Icon, you should copy the Cart icon class from <strong>general-ui.css file<\/strong>, located in the <strong>CSS<\/strong> folder on your server.<\/p>\r\n     \r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-2-300x160.png\" alt=\"Landing_Page-How_to_change_Flaticon_icons-2\" width=\"300\" height=\"160\" class=\"alignnone size-medium wp-image-71635\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-2-300x160.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-2-150x80.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-2-1024x545.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-2.png 1266w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t<\/li>\r\n\t\r\n   <li>\r\n   <p>Next you should edit the <strong>index.html file<\/strong> from <strong>Installation Root folder<\/strong> on your server.<\/p> \r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-3.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-3-300x122.png\" alt=\"Landing_Page-How_to_change_Flaticon_icons-3\" width=\"300\" height=\"122\" class=\"alignnone size-medium wp-image-71636\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-3-300x122.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-3-150x61.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-3-1024x416.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-3.png 1272w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n   <\/li>\r\n   \r\n   <li>\r\n   <p>In <strong>index.html file<\/strong> search for the icon class that you want to replace, and <strong>change the icon class name<\/strong>.<\/p>\r\n   \r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-4.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-4-300x165.png\" alt=\"Landing_Page-How_to_change_Flaticon_icons-4\" width=\"300\" height=\"165\" class=\"alignnone size-medium wp-image-71637\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-4-300x165.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-4-150x83.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-4-1024x564.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-4.png 1262w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n   <\/li>\r\n   \r\n   <li>\r\n   <p>Go back to your site and <strong>make sure to refresh page to see changes<\/strong>.<\/p>\r\n   \r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-5.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-5-300x165.png\" alt=\"Landing_Page-How_to_change_Flaticon_icons-5\" width=\"300\" height=\"165\" class=\"alignnone size-medium wp-image-71638\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-5-300x165.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-5-150x83.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-5-1024x564.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Landing_Page-How_to_change_Flaticon_icons-5.png 1245w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n   <\/li>\r\n\t\r\n<\/ol>\r\n\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=QLmA4YIUS3U?width=1280&amp;height=720\" rel=\"prettyPhoto\">Landing Page. How to change Flaticon icons<\/a>","protected":false},"excerpt":{"rendered":"<p>This video tutorial is going to show you how to change Flaticon icons in  Landing page templates.<\/p>\n","protected":false},"author":73,"featured_media":71639,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1016,2039],"tags":[1998,811,2080],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/71633"}],"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\/73"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=71633"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/71633\/revisions"}],"predecessor-version":[{"id":86436,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/71633\/revisions\/86436"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/71639"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=71633"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=71633"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=71633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}