How to change social icons that come with the theme

How to change social icons that come with the theme

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
  1. Open Font Awesome icons page.
  2. Enter keyword to search for the icon. For example, enter “Facebook”.
  3. There will show different icons for Facebook, choose one and click on it.

find-another-social-icon

 

Step 2 – Get the unicode of the icon

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”. Please see the screenshot below:

get-unicode

 

Step 3 – Write simple custom CSS

On your site dashboard, please go to Appearance > Customize, then find Additional CSS section, there you can add custom CSS.

custom-css-for-icons

The custom code will look like this:

ul.social-nav li a[href*="facebook"]:before {
    content: "\f082";
}

And please see the screenshot below:

custom-code-explaination

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”), your custom CSS would be:

ul.social-nav li a[href*="twitter"]:before {
    content: "\f081";
}

custom-css-for-icon-2


If you can’t find Additional CSS 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.