DEV Community

Cover image for Twitter X Logo for Bootstrap Icons
Simon Köhler
Simon Köhler

Posted on

12

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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!)

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay