If you’ve incorporated a Twitter link on your website, perhaps in the footer or elsewhere, it’s time to consider updating to Twitter’s latest logo. Gone is the iconic ‘bird’, and in its place is the fresh new logo ‘X’.
Updating the Twitter Icon with FontAwesome
For those who use FontAwesome Icons, the Twitter icon is typically represented with the following HTML code:
<i class="fa fa-twitter"></i>Instead of modifying the HTML, you can seamlessly transition to the new logo by updating or overriding the existing CSS for the Twitter icon. Here’s how:
Add the following CSS snippet to your style.css:
.fa.fa-twitter::before {
display: inline-block;
width: 1em;
height: 1em;
content: "";
background-color: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 -8 26 30" xmlns="http://www.w3.org/2000/svg"><g><path fill="white" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></g></svg>') no-repeat center;
mask: url('data:image/svg+xml;utf8,<svg viewBox="0 -8 26 30" xmlns="http://www.w3.org/2000/svg"><g><path fill="white" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></g></svg>') no-repeat center;
background-position: center 3px;
}With this CSS in place, every time you use:
<i class="fa fa-twitter"></i>It will render the new Twitter logo, ensuring your website stays updated with the latest branding:
When I try to insert the snippet into Customizing Additional CSS, if gives me an error and says “Markup is not allowed in CSS.” What do I need to do to fix it?
This worked perfectly for me. Thanks!!!
Thanks. worked !
But my logo is blue and not very center on his height.
Is there a way to change this too?
Thank you so much. It is perfectly working.