contacts

Buy All 111 Premium WordPress Themes for $59.99
No Additional Fees, Pay Once and Use Unlimited Time for Unlimited Domains, Free Lifetime Updates

Upgrading to the Latest Twitter Logo on Your Website

Upgrading to the Latest Twitter Logo on Your Website

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:

One Response to “Upgrading to the Latest Twitter Logo on Your Website”

  1. 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?

Leave a Reply