Adding Discord and TikTok social icons to cover page of website

Site URL: https://www.streetballleague.com/

Hi all! Is there any way to add a Discord Icon and TikTok Icon to the footer of my website (currently a cover page).

Thanks so much for any help you can provide.

Hi. You mean these icons?

• https://fontawesome.com/icons/tiktok?style=brands
• https://fontawesome.com/icons/discord?style=brands

I just want to upvote the idea of adding Tik Tok and Discord to the Social Media blocks!

I second this! I'd love for a discord logo to be available for social media blocks without having to code it in. if anybody knows how please advise! Thanks!

If anyone wants to add this with custom code. Follow this

Step 1. Add this line to COver Page Header

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">

Step 2. Share link to cover page, we will give the code

Hi @tuanphan!

I've added the code to my Cover Page and would like to move to Step 2 to get the discord logo up.

Here's the cover page.

Thank you!

17 hours ago, carly.pearlman said:

Hi @tuanphan!

I've added the code to my Cover Page and would like to move to Step 2 to get the discord logo up.

Here's the cover page.

Thank you!

Don't remove above code. Add this code to under

<style>
  [href*="discord"] div svg {
    display: none;
}

[href*="discord"] div:before {
    content: "\f392";
    font-family: "Font Awesome 5 Brands";
    color: white;
}

</style>

Reference: https://fontawesome.com/v5.15/icons/discord?style=brands

@tuanphan thank you!!

Is there anyway to make is just the icon? Right now the icon exist in a box even when I try to change the color.

On 1/3/2022 at 1:08 AM, carly.pearlman said:

@tuanphan thank you!!

Is there anyway to make is just the icon? Right now the icon exist in a box even when I try to change the color.

 

Add this code to fix this

<style>
  [href*="discord"] div {
    transform: scale(1) !important;
}
</style>

10 hours ago, tuanphan said:

Add this code to fix this

<style>
  [href*="discord"] div {
    transform: scale(1) !important;
}
</style>

 

This worked! Thank you again! 🙌

@tuanphan any chance you can help me add the TikTok logo as well? I've added the link to my social links on the site.

(sorry -- I didn't think I needed it but the client just asked 😬)

10 hours ago, carly.pearlman said:

@tuanphan any chance you can help me add the TikTok logo as well? I've added the link to my social links on the site.

(sorry -- I didn't think I needed it but the client just asked 😬)

Use this code

<style>
 [href*="tiktok"] div svg {
    display: none;
}

[href*="tiktok"] div:before {
    content: "\e07b";
    font-family: "Font Awesome 5 Brands";
    color: white;
}
[href*="tiktok"] div {
    transform: scale(1) !important;
}
</style>

Reference: https://fontawesome.com/v5.15/icons/tiktok?style=brands

Thank you! 🎉