I just needed the new Twitter X Logo now for a project that uses the Bootstrap Icon Library. So I created a workaround that should work until the logo is officially included in the Bootstrap Icons.
With this CSS snippet, you can use the new Twitter X Logo in your project. The downside: it's a quick and temporary solution, and therefore you have to resize the icons manually. The default size is 16x16 pixels.
How does it work?
To make it as simple as possible, I simply created a new CSS class "bi-twitter-x". I previously converted the SVG Twitter X logo into a string, which I shortened for the article. You can find the full code in the CodePen. The image is used as background image and is always squared using the CSS property "aspect-ratio". Therefore only the height has to be adjusted to scale the logo.
/* New Class: bi-twitter-x */
.bi-twitter-x:before{
content:'';
background-image: url('data:image/svg+....);
background-size: cover;
height: 16px;
aspect-ratio: 1 / 1;
}
Sizing is not easy, because it's not a web font (yet)
I have added some custom size to fit the logo to the size of the headlines. You can adapt these classes to your project if you like.
/* Example: Standalone logo sizes */
h1 .bi-twitter-x:before,
.fs-1 .bi-twitter-x:before{
height: 40px;
}
h2 .bi-twitter-x:before,
.fs-2 .bi-twitter-x:before{
height: 32px;
}
h3 .bi-twitter-x:before,
.fs-3 .bi-twitter-x:before{
height: 28px;
}
h4 .bi-twitter-x:before,
.fs-4 .bi-twitter-x:before{
height: 25px;
}
CodePen Twitter X Logo for Bootstrap Icons
Do you like my Stuff?
Sign up for my Newsletter: https://simonkoehler.com/newsletter
Thanks for reading! (100% human written mthrfckrs!)
Top comments (0)