Brian Coords

WordPress Developer & Educator

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
    Susan Docker

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

    Reply
    1. Brian Coords Avatar
      Brian Coords

      Yay!

  2. Kristian Polso Avatar
    Kristian Polso

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

    Reply
  3. CJ Avatar
    CJ

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

    Excellent contribution. Have a great day!

    CJ

    Reply
  4. Tony Lush Avatar
    Tony Lush

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

    Reply
    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
    Mosiah

    Thanks very much!

    Reply
  6. Joe Avatar
    Joe

    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 */

    Reply
    1. Brian Coords Avatar
      Brian Coords

      Great idea! Thanks for sharing.

  7. Ben Avatar
    Ben

    Woohoo! what a hack! Thanks!

    Reply
  8. ghostx Avatar
    ghostx

    You are the best!!! super hack

    Reply
  9. Emily Avatar
    Emily

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

    Reply
  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: “”;
    font-size:1.2em;
    }

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

    And looks good to me.

    Reply
  11. Akussung Kenneth Avatar
    Akussung Kenneth

    Boom!!!!

    Reply
  12. IoanaG Avatar
    IoanaG

    I replaced this in the font awesome .css files:
    .fa-twitter:before{content:”\f099″}
    .fa-twitter-square:before{content:”\f081″}

    with:
    .fa-twitter:before{content:””}
    .fa-twitter-square:before{content:””}

    And worked brilliantly. Based on your solution.

    Reply

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.