文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在字体中复制TikTok徽标(带颜色)

问如何在字体中复制TikTok徽标(带颜色)
EN

Stack Overflow用户

提问于 2021-04-04 00:49:29

回答 3查看 2.6K关注 0票数 1

TikTok图标是去年添加到FontAwesome中的(.fab .fa-tiktok)，但它当然是纯色的。我想在样式它在CSS，以符合TikTok的品牌指南。也就是说，浅蓝色和粉红色。

我尝试使用filter:创建一个解决方案，但它删除了原始的(黑色)字母。这是我到目前为止所得到的：

.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>

css

icons

tiktok

回答 3

Stack Overflow用户

回答已采纳

发布于 2021-04-04 01:16:00

您可以使用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>

票数 1

Stack Overflow用户

发布于 2021-04-04 01:11:11

您的css甚至没有得到适当的应用，因为.fa-tiktok并不像您的代码所描述的那样是.fab的子代。

无论如何，在.fa-tiktok的内容中添加两个边缘为2px的阴影(蓝色为负，红色为正)。

.fa-tiktok {
  color: #111111;
  
  filter: drop-shadow(2px 0px 0px #FD3E3E) drop-shadow(-2px -2px 0px #4DE8F4);
}

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

票数 1

Stack Overflow用户

发布于 2021-04-04 01:19:07

我复制了两份，并用不同的颜色放置它们

.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;
}
i{
    position: absolute;
font-size:200px
}

i:nth-of-type(1){
    color: #E62259;
    right: 10px;

}


i:nth-of-type(2){
    color: #02F4EB;
    top: -2px;
    opacity: 0.7;
}
.container{
    position: relative;
    width: 40px;
    height: 200px;
    background-color: white;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="css/style.css">
<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" />

</head>
<div class ="container">
<i class="fab fa-tiktok fa-2x"></i>
<i class="fab fa-tiktok fa-2x"></i>
<i class="fab fa-tiktok fa-2x"></i>
</div>



<script src="test.js"></script>
</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66933650

复制

相似问题

问如何在字体中复制TikTok徽标(带颜色)
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在字体中复制TikTok徽标(带颜色)EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在字体中复制TikTok徽标(带颜色)
EN