{"id":75792,"date":"2016-09-15T10:11:49","date_gmt":"2016-09-15T14:11:49","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=75792"},"modified":"2016-10-12T10:28:29","modified_gmt":"2016-10-12T14:28:29","slug":"prestashop-1-6-x-change-default-social-networks-icons","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/prestashop-1-6-x-change-default-social-networks-icons.html","title":{"rendered":"PrestaShop 1.6.x. How to change default social networks icons"},"content":{"rendered":"<p>This tutorial will guide you on how to change default social networks&#8217; icons in your <a href=\"https:\/\/www.templatemonster.com\/prestashop-themes.php\" target=\"_blank\">PrestaShop<\/a> store.<\/p>\r\n\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/3ALGmcQpf10\"><\/iframe>\r\n<\/div>\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_1.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_1-300x169.jpg\" alt=\"PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_1\" width=\"300\" height=\"169\" class=\"alignnone size-medium wp-image-75794\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_1-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_1-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_1-768x432.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_1.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<ol>\r\n\t<li>\r\n\t\t<p>Right click the mouse and use <strong>&#8216;Inspect element&#8217;<\/strong> tool to locate the CSS class of the existing icon to edit and copy the CSS class of the button.<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_2-300x169.jpg\" alt=\"PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_2\" width=\"300\" height=\"169\" class=\"alignnone size-medium wp-image-75795\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_2-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_2-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_2-768x432.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_2.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t\t\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>Open the <strong>.css<\/strong> file with the inspected rule on the server or computer using a code editor and look for the class code in it. We have to open <strong><i>themes\/theme1210\/css\/global.css<\/i><\/strong> in this case.<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_3.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_3-300x169.jpg\" alt=\"PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_3\" width=\"300\" height=\"169\" class=\"alignnone size-medium wp-image-75796\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_3-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_3-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_3-768x432.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_3.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t\t\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>The icon is set with <strong>content: &#8220;\\f09a&#8221;;<\/strong> code. You can use this <a href=\"http:\/\/fontawesome.io\/icons\/\" target=\"_blank\" rel=\"nofollow\">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 flickr one. After clicking the icon, we need to copy its <strong>Unicode<\/strong>.<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_4.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_4-300x169.jpg\" alt=\"PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_4\" width=\"300\" height=\"169\" class=\"alignnone size-medium wp-image-75797\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_4-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_4-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_4-768x432.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_4.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t\t\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>Paste the <strong>Unicode<\/strong>, copied from the FontAwesome site into your css rule content part in <strong><i>themes\/theme1210\/css\/global.css<\/i><\/strong> so it looks like this:<\/p>\r\n\t\t\r\n\t\t<pre class=\"brush:css\">.footer-container #footer #social_block ul li.facebook a:before {<br>\r\n\tcontent: &quot;\\f16e&quot;; }\r\n\t\t<\/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\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_5.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_5-300x169.jpg\" alt=\"PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_5\" width=\"300\" height=\"169\" class=\"alignnone size-medium wp-image-75793\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_5-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_5-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_5-768x432.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/PrestaShop_1.6.x._How_to_change_deafult_social_networks_icons_5.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t\r\n<\/li>\r\n<\/ol>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=3ALGmcQpf10?width=1280&amp;height=720\" rel=\"prettyPhoto\">PrestaShop 1.6.x. How to change default social networks icons<\/a>","protected":false},"excerpt":{"rendered":"<p>This tutorial will guide you on how to change default social networks&#8217; icons in your PrestaShop store.<\/p>\n","protected":false},"author":57,"featured_media":75798,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[732],"tags":[1761,811,552,860],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/75792"}],"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\/57"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=75792"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/75792\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/75798"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=75792"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=75792"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=75792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}