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:
Leave a Reply