如何在 Fontawesome 中复制 TikTok 徽标（带颜色）

Question

去年，FontAwesome 中添加了 TikTok 图标（.fab .fa-tiktok），但当然，它是单色的。我想用 CSS 设计它的样式，以符合 TikTok 品牌指南。那就是浅蓝色和粉红色。

我尝试使用过滤器创建一个解决方案：但它剪掉了原始（黑色）字母。这是我到目前为止所得到的：

.fab .fa-tiktok {
  color: #111111;
  filter: drop-shadow(-5px -5px 0 #24f6f0) contrast(150%) brightness(110%);
  z-index: -1;
}

.fab .fa-tiktok::after {
  filter: drop-shadow(5px 5px 0 #F70250) contrast(150%) brightness(110%);
  z-index: -1;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<i class="fab fa-tiktok fa-2x"></i>

Answer 1

您可以使用mix-blend-mode来相乘颜色。问题是两种官方颜色（青色和洋红色）加起来不等于黑色，它们需要黄色成分，而黄色成分不存在。所以我在洋红色中添加了一些黄色，使其接近红色，但总体结果与官方徽标几乎相同。

.tiktoklogo {
  font-size: 100px;
  position: relative;
  color: #00fff8;
}
.tiktoklogo i:last-child {
  mix-blend-mode: multiply;
  color: #ff0010;
  position: absolute;
  left: 5px;
  top: 7px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

<div class="tiktoklogo">
  <i class="fab fa-tiktok"></i>
  <i class="fab fa-tiktok"></i>
</div>