Divi Tip – Add Instagram to the social links

Divi Tip – Add Instagram to the social links

Here’s a Divi tip on how to add Instagram to the top social menu.

I see people asking for ways to insert the Instagram logo/link in Divi’s designated social links areas, like the top bar, and the footer social area. I didn’t care about doing any of that because I just used a social plugin, but after a client asked about IG, I decided to look into it. It’s actually easier than it sounds/looks.

(note: I’m sure ET will add IG to their updates soon, but for now, this is a really simple way of getting this done.)

The icon

So let’s start with the icon set. Found here.

Get the code for the icon you want. In this case, let’s go with Instagram.
(note: you can swap this out for any other social network, but change the codes)

I’ll use this code:



See the first three characters? & # x ? That will become a \ –> So it’ll be a \e09a –> that will become the icon code in a sec.

 

The CSS

Let’s replace an icon that’s… not used much… So pick one or the other from the two below

/* Replace the G+ icon, whatever that is, or the RSS icon */
.et-social-google-plus a.icon:before {
  content: "\e09a";
}
.et-social-rss a.icon:before {
  content: "\e09a";
}

Just paste that anywhere you would normally paste custom CSS,

add the instagram address

and you’ll have the instagram icon where the RSS icon used to be. (or you can swap out the Google Plus icon, because that’s.. useless.. too)

So there you have it. Super simple.

 

 

Photo by Tom Sodoge on Unsplash

Get Breakdance

Breakdance is, in my opinion, the best page/site builder on the market, which is why all my tutorials use Breakdance. It's also why I have an affiliate link. You don't pay extra, but I get a little commission, so it helps support the site. Thanks!

Get ACF Pro

Another essential plugin for site building. This isn't an affiliate link, it's just for convenience.

Get WP Codebox Pro

If you'd like an easier to use, and more advanced code management plugin (instead of just editing and making files yourself) then WP codebox pro is for you. Adding php, js, and even SCSS. Pretty nice! Affiliate link below.

Blank Plugin

Sort of blank. It's made to be easy to use with the tutorials. Download and edit any way you see fit.
  1. Hi PK,

    Tried the above but nothing is changing for me. Any ideas?

    • Could you explain in more detail what you did?

      – Where did you add the CSS?
      – Did you change the RSS icon, or G+?
      – Did you add the IG link in the right field?

      Thanks

  2. Hi,
    I tried this and had great success with changing the rss one but the G+ won’t change at all. Seems putting in two codes doesn’t work because if I swap it out to twitter it doesn’t change the icon either.

  3. All good, I fixed the issue. There was a line of dodgy code blocking the read. Cheers for this!

    • That’s great to hear. Cheers!

  4. Needed this, you rock!

    • Thanks! It’s weird how IG is so IGnored, when it’s now the social media of choice for many businesses. haha

  5. that worked out great! thanks!!!!

    • Thanks! Happy to help!

  6. Legend mate, this worked a treat for me. So simple compared to other suggestions. Thanks again.

    • Thank you for the kind words! Nice and simple!

Leave a Reply

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

New tutorials

Designing Beyond the Brief
Disable Gutenberg Editor on some ACF pages
ACF flexible content fields in Breakdance 2.4
Making a lightbox from a CPT Loop

Got a question? ask!

If you have any question about the content on this page, feel free to send me an email by clicking the button below.

newsletter? sign up!

Sign up to the newsletter for updates on tutorials, news, and offers.

Join the cypher!

An awesome membership program for Breakdance Builder users coupled with an inclusive, friendly community.

Got a question?

If you have a question about something on this page, send me an email, and hopefully I can answer, and we can solve it!