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

Nelson Miller Pee Aye Creative
In this Divi tutorial I will show you how to replace the Twitter icon with X in the Divi Social Follow module.

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.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about 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

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Please share this post!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

10 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
    • Hemant Gaba

      Hi Chadi!

      Add the following code for the Monarch plugin icon:

      .et_monarch .et_social_icon_twitter:before, .et_monarch .et_social_icon_twitter:after{
      content: “\e61b”;
      font-family: “Font Awesome 6 Brands” !important;
      }

      Hope it helps!

      Reply
  3. dwd

    Thanks so much Nelson, works perfectly! 🙂

    Reply
  4. Jay

    Hi Nelson! Great tutorial!

    I’ve been trying to get this to work on the default social icons that appear in the footer and secondary menu bar but they aren’t working. Any suggestions?

    Reply
    • Hemant Gaba

      Hi Jay!

      The code should work fine for footer icons as well. Try clearing the browser cache and check again. If the issue persists, share the URL of the page to investigate further.

      Reply
  5. Chelsea

    Thank you so much Nelson! Like others have said, this works great and was super easy to follow, really appreciate it!

    Reply

Submit a Comment

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

Recent Posts

0

Your Cart