Updating the Twitter/𝕏 Icon in Font Awesome 4

If you’re managing an older website running Font Awesome 4, you might be asked to swap out the Twitter icon for the new X / 𝕏 symbol. Personally, I wasn’t in the mood to pull down an entire site, dig up the build process, replace FA4 with a newer version, etc. Instead, I jumped into the WordPress Customizer and added a few lines of CSS.

This should work pretty well, but you might also mess around with the font size and weight a little bit if it looks weird next to the other icons. Is the “𝕏” glyph actually the new Twitter logo? I guess?

Learn Modern WordPress Development

I’m sharing the best resources and tutorials for developers building in and on the block editor.

15 responses to “Updating the Twitter/𝕏 Icon in Font Awesome 4”

  1. Susan Docker Avatar

    You Rock! Thanks so much for posting this. You saved me a bunch of time.

    1. Brian Coords Avatar
      Brian Coords


  2. Kristian Polso Avatar

    Big thanks from me too! Did not feel like updating the legacy site’s fonts just because of Twitter

  3. CJ Avatar

    Thanks Brian! I am also ‘not in the mood’.

    Excellent contribution. Have a great day!


  4. Tony Lush Avatar
    Tony Lush

    Pretty close, except for the serifs, which the X logo does not have. Shucks.

    1. Brian Coords Avatar
      Brian Coords

      If you set it to load in a ‘sans-serif’ font (even the system default), it should be fine. To be fair, I’ve only tested on a Mac/iOS and not Windows.

  5. Mosiah Avatar

    Thanks very much!

  6. Joe Avatar

    Exactly what I needed too, thanks.

    If you want the exact icon you can also load the .svg downloaded from FA in the content instead of the glyph:

    content: url(‘path/to/x-twitter.svg’);

    Adjust size with height/width instead of font-size and change the colour with filter (generated with https://codepen.io/sosuke/pen/Pjoqqp):

    filter: invert(100%) sepia(95%) saturate(19%) hue-rotate(320deg) brightness(103%) contrast(100%); /* white */

    1. Brian Coords Avatar
      Brian Coords

      Great idea! Thanks for sharing.

  7. Ben Avatar

    Woohoo! what a hack! Thanks!

  8. ghostx Avatar

    You are the best!!! super hack

  9. Emily Avatar

    I looked for hours, this is amazing!!!! Thank you for sharing!

  10. Dee Catch Avatar
    Dee Catch

    Thanks! Updated the phpBB ShareOn plugin to contain:

    .twitter-button {
    color: white;
    background: black;

    .twitter-button:before {
    font-family: “sans-serif”;
    content: “”;

    .twitter-button:hover {
    color: black;
    background: white;

    And looks good to me.

  11. Akussung Kenneth Avatar
    Akussung Kenneth


  12. IoanaG Avatar

    I replaced this in the font awesome .css files:


    And worked brilliantly. Based on your solution.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.