{"id":165,"date":"2017-04-02T07:51:15","date_gmt":"2017-04-01T23:51:15","guid":{"rendered":"http:\/\/www.loftocean.com\/berry\/?p=165"},"modified":"2019-08-27T11:27:33","modified_gmt":"2019-08-27T03:27:33","slug":"how-to-change-social-icons-that-come-with-the-theme","status":"publish","type":"post","link":"https:\/\/www.loftocean.com\/berry\/customize\/how-to-change-social-icons-that-come-with-the-theme\/","title":{"rendered":"How to change social icons that come with the theme"},"content":{"rendered":"

Berry theme supports all Font Awesome icons<\/a>. So you can change the icons for your social media links to other icons in the icon library.<\/p>\n

\n
Step 1 – Find the alternative icon<\/h6>\n
    \n
  1. Open Font Awesome icons<\/a> page.<\/li>\n
  2. Enter keyword to search for the icon. For example, enter “Facebook”.<\/li>\n
  3. There will show different icons for Facebook, choose one and click on it.<\/li>\n<\/ol>\n

    \"find-another-social-icon\"<\/p>\n

     <\/p>\n

    Step 2 – Get the unicode of the icon<\/h6>\n

    After clicking on the chosen icon to open its details page, find its unicode. For example, the unicode for the icon we selected in step 1 is “f082”<\/strong>. Please see the screenshot below:<\/p>\n

    \"get-unicode\"<\/p>\n

     <\/p>\n

    Step 3 – Write simple custom CSS<\/h6>\n

    On your site dashboard, please go to Appearance > Customize<\/strong>, then find Additional CSS<\/strong> section, there you can add custom CSS.<\/p>\n

    \"custom-css-for-icons\"<\/p>\n

    The custom code will look like this:<\/p>\n

    \r\nul.social-nav li a[href*=\"facebook\"]:before {\r\n    content: \"\\f082\";\r\n}\r\n<\/pre>\n
    And please see the screenshot below:<\/p>\n
    \"custom-code-explaination\"<\/p>\n
    So you can copy and paste the code above and change 2 things for other icons. For example, when you want to change the Twitter icon (and the new Twitter icon’s unicode is “f081”<\/strong>), your custom CSS would be:<\/p>\n
    \r\nul.social-nav li a[href*=\"twitter\"]:before {\r\n    content: \"\\f081\";\r\n}\r\n<\/pre>\n
    \"custom-css-for-icon-2\"<\/p>\n
    \n
    If you can’t find Additional CSS<\/strong> section in your Customizer, then it means your WordPress version is lower than 4.7. This is a new feature since WordPress v4.7, please update your WordPress to get this feature.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Berry theme supports all Font Awesome icons. So you can change the icons for your social media links to other icons in the icon library. Step 1 – Find the alternative icon Open Font Awesome icons page. Enter keyword to search for the icon. For example, enter “Facebook”. There will show different icons for Facebook, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-165","post","type-post","status-publish","format-standard","hentry","category-customize"],"_links":{"self":[{"href":"https:\/\/www.loftocean.com\/berry\/wp-json\/wp\/v2\/posts\/165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.loftocean.com\/berry\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.loftocean.com\/berry\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.loftocean.com\/berry\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.loftocean.com\/berry\/wp-json\/wp\/v2\/comments?post=165"}],"version-history":[{"count":5,"href":"https:\/\/www.loftocean.com\/berry\/wp-json\/wp\/v2\/posts\/165\/revisions"}],"predecessor-version":[{"id":355,"href":"https:\/\/www.loftocean.com\/berry\/wp-json\/wp\/v2\/posts\/165\/revisions\/355"}],"wp:attachment":[{"href":"https:\/\/www.loftocean.com\/berry\/wp-json\/wp\/v2\/media?parent=165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.loftocean.com\/berry\/wp-json\/wp\/v2\/categories?post=165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.loftocean.com\/berry\/wp-json\/wp\/v2\/tags?post=165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}