Bootstrap图标的Twitter X徽标-DEV365 开发者社区

我现在只需要新的Twitter X徽标来使用Bootstrap图标库的项目。因此，我创建了一个解决方法，该解决方法应该可以工作，直到徽标正式包含在引导图标中。

使用此CSS代码，您可以在项目中使用新的Twitter X徽标。缺点：这是一个快速而临时的解决方案，因此您必须手动调整图标大小。默认大小为16x16像素。

它是如何工作的？

为了使其尽可能简单，我只是创建了一个新的CSS类“ Bi-Twitter-X”。我以前将SVG Twitter X徽标转换为字符串，该字符串缩短了文章。您可以在Codepen中找到完整的代码。该图像用作背景图像，并始终使用CSS属性“ aptive-Ratio”进行平方。因此，只有必须调整高度才能缩放徽标。

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

尺寸并不容易，因为它不是网络字体（尚未）

我添加了一些自定义尺寸，以适合标志的标题。如果您愿意

/* 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徽标，用于引导图标

你喜欢我的东西吗？

注册我的新闻通讯：https://simonkoehler.com/newsletter

感谢您的阅读！（100％人类书面mthrfckrs！）