How To Replace The Twitter Icon With X In Divi Tutorial by Pee Aye Creative

How To Replace The Twitter Icon With X In Divi

In this Divi tutorial I will show you how to replace the Twitter icon with X in the Divi Social Follow module.
Categories: Divi CSS Tutorials

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

1. Add The Font Awesome CDN To Divi

We will be replacing the Twitter icon with an icon from Font Awesome. Font Awesome is an icon web font, and has a huge selection of free and paid icons that you can use. The first step is to make sure you have the Font Awesome CDN linked to your website via the Divi Theme Options Integration code. 

You may be wondering why this is needed since Divi already comes with Font Awesome integration. However, that integration is different and does not work for adding icons in pseudo classes like is required here to modify the social follow icons, so we need to add this CDN link to make it work.

For the first step, copy the code below and go to Divi>Theme Options>Integrations and paste it into the <head> code editor section.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
add Font Awesome CDN in Divi for changing the Twitter icon to X

2. Add The Divi Social Follow Module And Twitter Network

I assume if you are following this tutorial that you already have the Divi Social Follow module added to your layout, hopefully in a Divi Theme Builder template like a header or footer. If not, please add that now. And of course, add the Twitter social network.

If you are using the old header, this tutorial is not for that. I highly recommend converting your old header to the Theme builder header to take advantage of many new features, such as the ability to customize the social icons in Divi.

3. Replace The Divi Twitter Icon With X Using CSS

Thankfully, Font Awesome was quick, and they already added the X icon to their website, so it is available to use for free in the “Brands” section of icons. The unicode value is e61b, which is the value that determines which icon is used. This is the code that needs to be added to the content property of the icon in the Divi Social Follow module. To replace it, we need to find the selector and update the content property and the font-family property. I already did this for you and you can use the snippet below.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*replace Twitter icon with X in Divi Social Follow module*/
.et-social-twitter a.icon:before {
	content: "\e61b";
	font-family: "Font Awesome 6 Brands" !important;
}

4. Update The Background color

When you add a network in the module, Divi automatically uses the default brand color such as the Twitter blue. But you can override this, which is what you need to do now since X does not use the Twitter blue as the icon background color, but rather black #000000.

replace the twitter blue background color with X black in the Divi Social Follow module

5. Replace The Hover Tooltip Text Using jQuery

One last thing, we also need to update the little tooltip that appears when you hover your mouse cursor over the Twitter/X social network icon. By default, this says  “Follow on Twitter” which is now wrong.

replace the follow on twitter hover tooltip with follow on x in Divi

To update this, we need to use a snippet of jQuery code which can be added in the same place as the CDN link instep #1 in Divi>Theme Options>Integrations in the Add code to the < head > of your blog section.

<script>
 jQuery(document).ready(function(){
    jQuery('.et-social-twitter a').prop('title', 'Follow on X');
 });
</script>
add jQuery to replace the Twitter hover tooltip in the Divi Social Follow module

The final result from this tutorial will look like this:

final result of replacing Divi Twitter icon with with X

Last updated Sep 1, 2023 @ 12:40 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

5 Comments

  1. Matt

    Brilliant! Thanks Nelson, trust you to be out ahead!

    Reply
  2. Chadi Marouf

    Thank you for this, but how do you do this for Monarch?

    Reply
  3. dwd

    Thanks so much Nelson, works perfectly! 🙂

    Reply

Submit a Comment

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

Recent Posts

0

Your Cart