Select Page

Changing Social Icons with CSS

Good for any theme and with Font Awesome, or with the themes icons

Finding Your CSS Code to Change

Navigate to your website.  Now find the social icon you’re wanting to change.  Right click on it and select “inspect” (the wording may be different depending on your browser).  The code will pop up on the left.  Click the drop down beside the <a href and click the “::before” element.  You will then be able to see something like this “content“\e094”;” in the CSS source section at the bottom.

Copy that CSS code and put it into your CSS editor.  The entire thing will look something like this

.et-social-twitter a.icon:before {
    content: "\e094";
}

Finding Your “Unicode” for CSS that works for your theme to change the social icon

We use Divi Theme for ease of use, how customizable it is, and because it’s the best! Here’s a link to grab Divi if you don’t have it already, or you can just get a website made by us for as low as $100 and it includes Divi.

Divi Theme 

To find the unicode for the icon, just go to your themes documents.  Here’s the link for the divi icons.  https://www.elegantthemes.com/blog/resources/elegant-icon-font

Adding Font Awesome to Your “head” tag

We’re going to use FontAwesome V4.7 for this tutorial.  Your going to have to put in your email address to get your unique code to put in the head of your website.  https://fontawesome.com/v4.7.0/get-started/

Adding the code to the “head” of your website

Go into the backend of your website.  Click “Divi” on the left.  —> Theme Options —> Integration.  Now add the code to the “Add code to the < head > of your blog” section.

Finding Your Unicode for Font Awesome

Head over to the Font Awesome icon section here https://fontawesome.com/icons?d=gallery and search your icon.  Click it.  You will then see the unicode.

Adding Your CSS to Change The Icon!

Go into your CSS editor and change the “content” Unicode to the one you now have and add !important.  Here’s examples below.  With Font Awesome, you will have to add “Font Family”

/****** SOCIAL ICONS ********/


/*********TWITTER TO INSTAGRAM THEMES ICON **********/
.et-social-twitter a.icon:before {
    content: "\e00b" !important;
}

/**********FONT AWESOME ICONS BELOW *****/
/******* GOOGLE ICON TO ETSY *****/
.et-social-google-plus a.icon:before {
    content: "\f2d7" !important;
    font-family: FontAwesome !important;
}

/******* RSS ICON TO ??? *****/
.et-social-rss a.icon:before {
    content: "\f13d" !important;
    font-family: FontAwesome !important;
}

All Done!

The social icons should now be changed!  Remember what you changed it to.  For example.  If you have a Google+ section in your theme, but you changed that icon to Etsy, remember to put your etsy URL.

Let me know if you have any questions at all!

 

/****** SOCIAL ICONS ********/


/*********TWITTER TO INSTAGRAM THEMES ICON **********/
.et-social-twitter a.icon:before {
    content: "\e00b" !important;
}

/**********FONT AWESOME ICONS BELOW *****/
/******* GOOGLE ICON TO ETSY *****/
.et-social-google-plus a.icon:before {
    content: "\f2d7" !important;
    font-family: FontAwesome !important;
}

/******* RSS ICON TO ??? *****/
.et-social-rss a.icon:before {
    content: "\f13d" !important;
    font-family: FontAwesome !important;
}
Testing Out VooPlayer for the first time

Testing Out VooPlayer for the first time

AppSumo offers some amazing deals and this Black Friday is no different. I’ve picked up 3 of the programs they offer and they have all lived up to the hype. VooPlayer is amazing and there’s an embedded YouTube video I made above. Then I also purchased Lemlist, Plutio, and Social Bee.

read more

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Let's Work Together!

Get started with a free consultation today.  We'll guide you in the right direction and ensure your business succeeds.

8 + 11 =

Get Your FREE Easy Guide to Marketing Online

Get Your FREE Easy Guide to Marketing Online

Sign up for our newsletter and get the easiest guide to marketing online that you will find.  You will also be entered into our monthly draws for free websites and will be the first to know when we start our 7-day internet business boot camp!

You have Successfully Subscribed!