As everyone knows, Twitter has changed its name to X. Websites and tools like Divi will definitely need some time to catch up, so I wanted to provide you with some quick instructions now so that those who wish to make changes can do so before it gets updated later in a theme update. I’ll walk you through changing the Twitter icon in the Divi Social Follow module to X in this Divi tutorial.
1. Adding Font Awesome CDN To Divi
We will swap out the Twitter icon for a Font Awesome icon. You can use a vast array of paid and free icons from Font Awesome, an icon web font. The first step is to ensure your website is linked to the Font Awesome CDN using the Divi Theme Options Integration code. Given that Divi already comes with Font Awesome integration, you might wonder why this is necessary.
To make it function, we must add this CDN link because that integration is different and does not support adding icons in pseudo-classes, which is necessary in this case to change the social follow icons. To begin, copy the following code, navigate to Divi>Theme Options>Integrations and Copy and paste it into the code editor section <head>.
<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" />2. Adding Divi Social Follow Module with Twitter Network
If you are following this tutorial, I’m assuming you already have the Divi Social Follow module added to your layout, preferably in a header or footer of a Divi Theme Builder template. If not, do include that right away. Add the social network Twitter, of course.
This tutorial is not for you if you still use the old header. I strongly advise switching from your old header to the Theme builder header so you can benefit from many new features, like Divi’s social icon customization.
3. Using CSS to replace The Divi Twitter Icon With X
Fortunately, Font Awesome responded quickly, and they have since added the X icon to their website, which can be found in the “Brands” section of icons and used for free. The value that controls which icon is used is e61b, the Unicode value.
This code should be added to the Divi Social Follow module’s icon’s content property. We must locate the selector and update the font-family and content properties to replace it. You can use the sample I completed for you below. Where The CSS Code Is Pasted.
/*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
Divi automatically uses the default brand color, like Twitter blue, when you add a network to the module. However, you can override this, which is what you must do right now since X uses black instead of Twitter blue for the icon background color.#000000
5. Using JQuery to Replace The Hover Tooltip Text
Finally, we need to update the little tooltip when you move the mouse pointer over the social network icon for Twitter or X. This now says “Follow on Twitter,” which is incorrect by default.
We must use a little piece of jQuery code to update this, and you can add it in the same location as the CDN link in step #1 of Divi>Theme Options>. Integrations in the <head> of your blog section: Add code
<script>
jQuery(document).ready(function(){
jQuery('.et-social-twitter a').prop('title', 'Follow on X');
});
</script>
