Twitter X Logo for Bootstrap Icons

#bootstrap #icons #webdev #css

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