✅ Add Twitter "X" icon to the Icon library

[cswebstuff]

UPDATE TO MY POST:

TWITTER X CUSTOM ICON FOR ELEMENTOR

Hey Elementor friends,

I made a download page to share the Twitter X icon I made for Elementor.

It's a safe custom created Fontello zip file with the official X logo downloaded from Twitters "Brand Toolkit" page. I'll be posting tons more useful Elementor codes, CSS, tips and solutions on CodeXYZ.com so give it a bookmark to see what I'll be adding soon. 🤓

https://codexyz.com/twitter-x-icon-for-elementor/

---

Prerequisites

• I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
• The feature is still missing in the latest stable version of Elementor ( Elementor Pro )

What problem is your feature request going to solve? Please describe.

Trying to stay up-to-date with the new Twitter icon "X" - it's not available yet in the Elementor Font Awesome library (as of 8/8/23)

Describe the solution you'd like

Provide the new Twitter X icon for social media

Describe alternatives you've considered

I have to currently make and upload my own SVG :-(

Additional context

No response

[Clockworkcreative]

I completely agree! This is really frustrating and whilst I have uploaded my own SVG for the time being, for the social share widget on posts it automatically assigns the icon so I can't use my custom SVG.

In addition, the Threads logo needs to be added. Both the Twitter 'X' icon and Threads are available on Font Awesome 6.

[portrayaloflife]

Font Awesome released it but it's not in Elementors icons yet
https://fontawesome.com/icons/x-twitter?f=brands&s=solid

[schmidtdesign]

Looks like we are still waiting for the x-twitter icon to be available in elementor's icon library - why?

[cswebstuff]

Hey schmidtdesign,

I have a fontello zip to add that Twitter X to your Elementor custom icon library. Let me know if you want it, just message me and I'll hang it off my site for you to download.

By the way, those icon SVG zip files must be in a proprietary format because I tried zipping a .svg file and Elementor will not accept it. Only zipped files from the actual companies of either: Fontello, IcoMoon or Fontastic will work.

[TehKonnos]

When I tried to upload the X SVG icon in the library, it looked a bit strange next to the other social icons. If your file solves this issue, I am also interested in downloading it.

[onlineorg]

There's a temporary and easy solution.

1. Download the X SVG file with the color you want from FontAwesome, Flaticon or whatever you want.
2. Add it to the medias of your website.
3. Add this CSS with the link of your file, and ajust width if necessary
   i.fab.fa-twitter {
   content: url(wp-content/uploads/twitter-alt-2.svg);
   }
4. Save the code.

This will replace the Twitter icon by the X icon downloaded in your library

[pkimmel6345]

@onlineorg Works like a charm, thanks so much!

[cswebstuff]

Hi @pkimmel6345,

Did you use my SVG download page(s)? If yes which one: The Twitter X (or) the Meta Threads? Just curious.

Thx,
@cswebstuff

[hitsgee]

Elementor are still running Font Awesome 5 despite version 6 being out for nearly 2 years. We are missing many new and improved icons while they take their sweet time to upgrade.

Elementor added FA5 in Elementor 2.6 we are on the beta for 3.17 and still no FA6.

[Clockworkcreative]

It's pretty poor show! Although you can upload the SVGs in the meantime for generic social icons, for the social share button widget where you can't easily upload an alternative icon. You only have a pre-defined list and it automatically applies the platform icon. Pull your finger out Elementor!

[cswebstuff]

TWITTER X CUSTOM ICON FOR ELEMENTOR

Hey Elementor friends,

I made a download page to share the Twitter X icon I made for Elementor.

It's a safe custom created Fontello zip file with the official X logo downloaded from Twitters "Brand Toolkit" page. I'll be posting tons more useful Elementor codes, CSS, tips and solutions on CodeXYZ.com so give it a bookmark to see what I'll be adding soon. 🤓

https://codexyz.com/twitter-x-icon-for-elementor/

[Ant7t5]

This fix is awesome thanks cs. I don't suppose you have one for Threads do you? 👍 Ant

[cswebstuff]

Hey thanks Ant.

I'm working on getting the official Threads SVG (crazy difficult to find) - it's a work in progress but I have communication out to the Meta branding department and will make an icon as soon as I get the "official" file.

I'll post it here when it's ready.

[cswebstuff]

META THREADS CUSTOM ICON FOR ELEMENTOR

Hi All,

OK, it's here... I created a Meta Threads Icon for Elementor for you to download. Installation for Elementor custom icon is included on the page.

This is a safe custom created Fontello zip download file for the official Meta Threads logo. The logo is from Meta's Brand Resources page. I'll be posting tons more useful Elementor codes, CSS, tips and solutions on CodeXYZ.com so don't forget to bookmark CodeXYZ.com to see what's added next. 🤓

https://codexyz.com/meta-threads-icon-for-elementor

Enjoy!

[ankur3232]

After uploading, it is showing correct thumbnail in media, but while choosing it from social icons in elementor on my page, the icon becomes a "home" icon. Its not working for me. Can yo help me out here please

[cswebstuff]

@ankur3232
Just so we don't spam this forum with help replies, signup to the newsletter on CodeXYZ.com so I can email you directly and I'll see if I can help.

[onlineorg]

There's a temporary and easy solution.

1. Download the X SVG file with the color you want from FontAwesome, Flaticon or whatever you want.
2. Add it to the medias of your website.
3. Add this CSS with the link of your file, and ajust width if necessary
   i.fab.fa-twitter {
   content: url(wp-content/uploads/twitter-alt-2.svg);
   }
4. Save the code.

This will replace the Twitter icon by the X icon downloaded in your library

[hiyakake]

I understand that they are available by uploading an SVG, but Elementor should be easy for everyone.
We would very much like to be able to use the new icons as soon as possible without having to use complicated methods.
In fact, even if you upload an SVG, it will not display beautifully unless the margins of the SVG are the same size as those of "FontAwesome".
Adjusting SVG margins may seem simple, but it is not a skill that everyone has.

[Clockworkcreative]

Exactly! Elementor has an icon widget and also uses social icons within other widgets, you would expect them to be relatively up-to-date and not require workarounds. In July, X replaced Twitter and Threads was launched and they've been available in FontAwesome for months! This should absolutely have been part of a standard update to an existing functionality, we shouldn't have to ask for this as a feature request!

[websubst]

The "share buttons" widget doesn't let us choose the icon X logo for Twitter

[websubst]

Yikes! Thanks for trying! I'll replace the share buttons widget with something else instead. I prefer the bird logo to a plain X :-)

[cswebstuff]

Hey, if you don't mind circling back let us know what you find - it would be helpful for everyone here. :-)

[ellieender]

@cswebstuff @blackvx Any updates? I'm also experiencing this on my end with my blog site. A colleague sent this over: https://support.buddyboss.com/support/solutions/articles/72000610217-how-to-change-the-twitter-social-share-icon-to-the-new-x-logo

But I don't think this code works for this situation.

[cswebstuff]

Hey @ellieender,
Thanks for the reminder and for posting that link, it was a helpful place to start but you're right it won't do the trick for Elementor's social share buttons. I was able to code 2 working versions today with Square & Round icons, and should have the page & code up by end of day tomorrow (January 11). I'll update this message when it's ready.

[cswebstuff]

OK, my Twitter X Social Share Button for Elementor is finally done!
https://codexyz.com/twitter-x-social-share-button-for-elementor/

There are 2 options available... The EASY way and the more DIFFICULT stylish option.
*** Please pound that LIKE button at the bottom of that page if this helps you out! ***

Hit me up here if you have any questions or helpful code tweaks to this! 🤓

[m1ga]

#24315
it contains x-twitter 👍

[Clockworkcreative]

It's good to see Elementor are finally doing something about this! Although I can't see any timeline for deployment, hopefully it's soon!

[toineenzo]

FYI: FA6 is now added to the roadmap

[m1ga]

They are working on it since November. You can follow the PR #24315

[toineenzo]

I know :)

[cswebstuff]

In the meantime people can download the custom created icon from https://codexyz.com and follow the instructions there. 😎

[CenterStepMarketing]

@cswebstuff I tried downloading your zip file from codexyz but am getting this error. File was not altered or renamed in any way; just straight download from your original link and uploaded to my site(s). Elementor and Elementor Pro are both on their latest release (3.19.0).

Strange part is that it did work on the first website I attempted, but after that, it has not worked on any other sites.

[cswebstuff]

@portrayaloflife,

• It's not a plugin just a free file I made available to people who need it.
• Someone was having a problem so I was being kind and helping him out, I emailed him directly now so no one will be disturbed.
• I'm not peddling anything.

I created this original post, feel free to unsubscribe at any time and I hope you found the file helpful for your own projects.

[portrayaloflife]

@cswebstuff You are, you're peddling your file to everyone and troubleshooting it. Stop please. People can upload an X SVG easily if they need to. Again, great you want to help just direct them to somewhere off this thread or offer a support email in the file you're sending.

[cswebstuff]

Please unsubscribe

[portrayaloflife]

Will report you if you keep peddling https://codexyz.com in this github.

[ellieender]

Since Elementor has refused, up till today, to provide a solution, what's wrong with developers coming up with their own solutions and sharing it? haha, sheesh.

[galantes]

I've solved this by putting a few lines of jQuerry and CSS code in the FOOTER of the page. This is replacing existing Twitter icon and blue color in Elementor with new X icon and black color.

<script> jQuery(document).ready(function($) { var newElement = $('<svg xmlns="http://www.w3.org/2000/svg" width="157.66mm" height="147.57mm" viewBox="0 0 5276.1 4938.2"><path d="m12.84 0 2037 2723.7-2049.9 2214.5h461.38l1794.7-1938.9 1450 1938.9h1570l-2151.7-2876.8 1908-2061.3h-461.39l-1652.8 1785.6-1335.4-1785.6h-1570zm678.48 339.82h721.25l3185 4258.5h-721.25l-3185-4258.5z"/></svg>'); $('.e-fab-twitter').replaceWith(newElement);}); </script>

<style>.elementor-share-buttons--color-official.elementor-share-buttons--skin-boxed .elementor-share-btn_twitter .elementor-share-btn__icon, .elementor-share-buttons--color-official.elementor-share-buttons--skin-minimal .elementor-share-btn_twitter .elementor-share-btn__icon {background-color: #000!important;}</style>

I get this as a result:

Hope it helps to someone.

[hitsgee]

They added the new Twitter and Threads icons to the beta should be out publicly in a week or so.

[toineenzo]

I wouldn't do this, it's bad practise

[leecollings-sb]

Confused here, as apparently this was added to Elementor on the 11th MArch - however I still cannot use the FA6 X Twitter logo on any page where Elementor icons are used (as it's using the old library still). So what's actually been updated or added?

UPDATE: Actually I can see what they've done. They've just added the X icon to their existing v5.15, rather than that include the new FA6. So I STILL am unable to upgrade my FA theme version to 6, or use the X icon, because the problem still exists where if I try to load the X icon on a page that includes Elementor icons, my theme X icon doesn't display because Elementor is forcing its own FA5 version to load over my theme's FA6.

Why can't Elementor just update the entire FA library it uses to v6?

[m1ga]

Why can't Elementor just update the entire FA library it uses to v6?

follow the FA6 PR as mentioned ealier: #24315

[mllemata]

I have version 3.20.1 of Elementor and 3.20.0 of Elementor Pro, but I can't find the X icon in the list.

[m1ga]

[mllemata]

[m1ga]

which widget are you using? I don't see the "Recommended" tab in my selection box. I'm using the normal icon widget

[mllemata]

I'm using the Social Icons widget and also normal Icon widget, but I'm searching in all icons, not just Recommended.

[m1ga]

ok, both work for me. Just saying that I don't have the "Recommended" tab at all in my vanilla Elementor 2.20.1 version. But I only have the free version so it might be a Pro thing.

[nicholaszein]

Hey everyone!

As you might already know, the 𝕏 logo for Twitter was implemented with the release of Elementor and Elementor Pro version 3.20.0. 🙌

You can now use the Icon Library to include the 𝕏 logo on any icon location on your website.

Social Icons

For the Social Icons widget, you can use the Icon Picker and find the 𝕏 icon in the icon library by typing either twitter or x (with a space) in the search box.

It's important to note that this icon is only available if you have purged Object Cache. Otherwise you won't see the icon in the library!

Share Buttons (Pro)

For the Share Buttons widget (Pro), we used a different approach. To maintain Backward Compatibility we added a new Network called X to the Network Dropdown List. You need to manually select that option to see the new icon.

Backward Compatibility

Elementor takes backward compatibility very serious. We have no intention to make changes to existing features that may break your site. For this reason we decided not to replace all icons with the new 𝕏 icon right away. This ensures all existing sites remain intact, and gives you the option to chose if you want to use the new icon or not.

---

Thank you everyone for your feedback and suggestions! 🙏

✅ Feel free to check it out and update your plugin to the new version!

Check the changelog for more information:
Changelog of Elementor and Elementor Pro

Cheers 🥂