Updating Twitter icon to X logo

[JammyDodger]

We’ve temporarily added the X logo as an available icon in core Discourse to allow everyone to make the branding switch on their own. Upgrading the entirety of Font Awesome in Discourse is a very large project, so this is meant to allow a workaround in the mean time.

If you’re looking to make the change, you can follow these steps:

1. Add temporary-twitter-x to your svg icon subset site setting

2. Create a new theme component and add the following code to the noted sections:

   Common > Head

   <script type="text/discourse-plugin" version="0.11">
     api.replaceIcon('fab-twitter', 'temporary-twitter-x');
   </script>
   

   Common > Color Definitions

   :root {
    --twitter: $twitter-or-white: dark-light-choose(unquote("#000"), unquote("#fff"));
   }
   

And that should be that.

You may also wish to update your site text customisations to use the new branding if you haven’t already:

/admin/customize/site_texts?q=twitter

Hopefully this will suffice until a more permanent solution is in place (or it gets changed to something entirely different next month )

[darkpixlz (Pyx)]

@JammyDodger

Upgrading the entirety of Font Awesome in Discourse is a very large project, so this is meant to allow a workaround in the mean time.

When this eventually happens, will it be optional? I don’t care what Elon says, I’m calling it Twitter, it is not “x”, and I’m keeping it that way on my sites. The logo looks bad anyways, I want to keep the bird.

[Canapin (Coin-coin le Canapin)]

@darkpixlz

When this eventually happens, will it be optional?

Even if it was the default behavior, you could still use the same code in reverse to replace the 𝕏 with the .

[tknospdr (David Muszynski)]

I’m not a developer, so I don’t know how to do this, but when using these instructions I get an admin warning banner that points to this page…

Modernizing inline script tags for templates & JS API

Using <script type='text/discourse-plugin> or <script type='text/x-handlebars'> in themes is now deprecated. Any use of these tags in themes should be updated according to the instructions below. Regular <script> and <script type='text/javascript'> are unaffected by this change. Timeline These are rough estimates, subject to change May 2025 - console deprecation messages enabled July 2025 - admin warning banners enabled September 2025 - removal of feature Converting <script type='t…

Can this be updated so I don’t lose the X icon?

[Moin]

You don’t need that anymore as the X icon is included in FontAwesome 6 and Discourse was updated to use that.

[tknospdr (David Muszynski)]

That’s good to know, but when I tried with the ‘x-twitter’ icon, it gave me an empty blank space. When I added ‘fa-x-twitter’ to the list of SVG icons, there was no change.

What should I be doing to make it show up officially?

[Moin]

Brand icons need fab (font awesome brand) as a prefix

[tknospdr (David Muszynski)]

I just saw that from your other post, thanks.

Based on what I saw on the FA website I thought it was just supposed to be fa-x-twitter

[Moin]

Maybe you were confused by the html example

But you can for example see the fab here

[tknospdr (David Muszynski)]

Probably. I just point and click like a madman sometimes.