{"id":74947,"date":"2016-08-17T09:57:16","date_gmt":"2016-08-17T13:57:16","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=74947"},"modified":"2017-08-24T05:18:36","modified_gmt":"2017-08-24T09:18:36","slug":"magento-how-to-manage-font-awesome-icons","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/magento-how-to-manage-font-awesome-icons.html","title":{"rendered":"Magento. How to manage Font Awesome icons"},"content":{"rendered":"<p>This tutorial shows how to edit <strong>Font Awesome icons in <a href=\"https:\/\/www.templatemonster.com\/magento-themes.php\">Magento<\/a><\/strong>.<\/p>\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/KitcTZvpqWw\"><\/iframe>\r\n<\/div>\r\n\r\n<p>NOTE: We strongly recommend that you <strong>backup each file prior its editing<\/strong>.<\/p>\r\n\r\n<ol>\r\n\t<li>\r\n\t\t<p>Right click the mouse and use &#8216;Inspect element&#8217; tool to locate the CSS class for the icon to edit and copy the CSS class for the button.<\/p>\r\n\t\t<p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/08\/Magento_How_to_manage_font_awesome_icons_1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/08\/Magento_How_to_manage_font_awesome_icons_1-300x251.png\" alt=\"Magento_How_to_manage_font_awesome_icons_1\" width=\"300\" height=\"251\" class=\"alignnone size-medium wp-image-74948\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/Magento_How_to_manage_font_awesome_icons_1-300x251.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/Magento_How_to_manage_font_awesome_icons_1-150x125.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/Magento_How_to_manage_font_awesome_icons_1.png 554w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t\t\r\n\t\t<\/p>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>Open the file with the css inspected rule from the server or computer using a code editor and look up the class code in it, as <strong><i>\/skin\/frontend\/tm_themes\/theme718\/css\/styles.css<\/i><\/strong> in our case.<\/p>\r\n\t\t<p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/08\/Magento_How_to_manage_font_awesome_icons_2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/08\/Magento_How_to_manage_font_awesome_icons_2-300x159.png\" alt=\"Magento_How_to_manage_font_awesome_icons_2\" width=\"300\" height=\"159\" class=\"alignnone size-medium wp-image-74949\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/Magento_How_to_manage_font_awesome_icons_2-300x159.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/Magento_How_to_manage_font_awesome_icons_2-150x80.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/Magento_How_to_manage_font_awesome_icons_2.png 675w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t\t\r\n\t\t<\/p>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>The icon is set with <strong>content: &#8220;\\f106&#8221;;<\/strong> code. You can use this <a href=\"http:\/\/fontawesome.io\/icons\/\" target=\"_blank\">Font Awesome icons reference<\/a> in order to pick another icon and find its respective code value. Also, you can use search engines in order to find it.<\/p>\r\n\t<\/li>\r\n\t<li><p>We will replace the current icon with the double up arrows. After clicking on the icon, we need to copy its <strong>Unicode<\/strong>.<\/p>\r\n\t\t<p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/08\/Magento_How_to_manage_font_awesome_icons_3.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/08\/Magento_How_to_manage_font_awesome_icons_3-300x265.png\" alt=\"Magento_How_to_manage_font_awesome_icons_3\" width=\"300\" height=\"265\" class=\"alignnone size-medium wp-image-74950\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/Magento_How_to_manage_font_awesome_icons_3-300x265.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/Magento_How_to_manage_font_awesome_icons_3-150x133.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/Magento_How_to_manage_font_awesome_icons_3.png 672w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t\t\r\n\t\t<\/p>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>Paste the <strong>Unicode<\/strong> copied from the FontAwesome site to your css rule content part in <strong><i>skin\/frontend\/tm_themes\/themeXXX\/css\/styles.css<\/i><\/strong> so it looks like this:<\/p>\r\n\t\t<pre class=\"brush:css\">.footer #back-top span::before {\r\n\tdisplay: inline-block;\r\n\tfont: normal normal normal 14px\/1 FontAwesome;\r\n\tfont-size: inherit;\r\n\ttext-rendering: auto;\r\n\t-webkit-font-smoothing: antialiased;\r\n\t-moz-osx-font-smoothing: grayscale;  \r\n\ttransform: translate(0, 0);\r\n\tcontent: &quot;\\f106&quot;;  \r\n\tfont-size: 45px; \r\n\tline-height: 40px;\r\n}<\/pre>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p><strong>Save<\/strong> the changes and refresh the site.<\/p>\r\n\t\t<p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/08\/Magento_How_to_manage_font_awesome_icons_4.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/08\/Magento_How_to_manage_font_awesome_icons_4.png\" alt=\"Magento_How_to_manage_font_awesome_icons_4\" width=\"207\" height=\"221\" class=\"alignnone size-full wp-image-74951\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/Magento_How_to_manage_font_awesome_icons_4.png 207w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/08\/Magento_How_to_manage_font_awesome_icons_4-140x150.png 140w\" sizes=\"(max-width: 207px) 100vw, 207px\" \/><\/a>\r\n\t\t<\/p>\r\n\t<\/li>\r\n<\/ol>\r\n<div class=\"inline-banner\">\r\n<a href=\"https:\/\/www.templatemonster.com\/service-center\/\">\r\n<img src=\"\/help\/files\/banners\/inline\/Banner-2-(835-x100).jpg\"\/>\r\n<\/a>\r\n<\/div>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=KitcTZvpqWw?width=1280&amp;height=720\" rel=\"prettyPhoto\">Magento. How to manage Font Awesome icons<\/a>","protected":false},"excerpt":{"rendered":"<p>This tutorial shows how to edit <strong>Font Awesome icons in Magento<\/strong>.<\/p>\n","protected":false},"author":75,"featured_media":74952,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[729],"tags":[1761,811,2407],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/74947"}],"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\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=74947"}],"version-history":[{"count":2,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/74947\/revisions"}],"predecessor-version":[{"id":82899,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/74947\/revisions\/82899"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/74952"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=74947"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=74947"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=74947"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}