Posted on Aug 24, 2023

Twitter X Logo for Bootstrap Icons

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; }