去年,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;
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)