Free Video Series 7 Tools for Modern WordPress Developers

Learn More

Brian Coords

WP 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?

23 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
  13. Jennifer German Avatar
    Jennifer German

    Perfect, thank you so much!

    Reply
  14. Andy Avatar
    Andy

    thanks man

    Reply
  15. Lukas Knobling Avatar
    Lukas Knobling

    Thanks a lot!!!

    Reply
  16. Olumide Olumoroti Avatar
    Olumide Olumoroti

    Thanks!!! God bless you!!!

    Reply
  17. Suhebat Avatar
    Suhebat

    Thank you so much! This helps me alot.

    Reply
  18. Archana Patel, India Avatar
    Archana Patel, India

    Brian, you are great! Thanks so much for posting this. You saved my lots of efforts & time. Big thank you.

    Reply
  19. Maram Naser Avatar
    Maram Naser

    Thank you

    Reply
  20. Christy Avatar
    Christy

    You are awesome sir – this worked perfectly thank you so much.

    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.