The TikTok icon was added to FontAwesome last year (.fab .fa-tiktok), but of course, it's a flat color. I want to style it in CSS, to match the TikTok branding guidelines. That is the light blue and pink colors.
I've tried to create a solution using a filter: but it cuts out the original (black) lettering. Here's where I've got so far:
.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>
You can use mix-blend-mode to multiply the colors. The problem is that the two official colors (cyan and magenta) do not add up to black, they need a yellow component which is absent. So I added some yellow to the magenta, bringing it close to red, but the overall result is almost identical to the official logo.
.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>