HELP PLEASE: Can't get TikTok icon to show in footer

EatHappyGrub
Tourist
8 0 2

We hired an agency to create our website and unfortunately had to cut ties. I looked into our theme store to add our TikTok icon to our footer and noticed that they coded it in. So I copied their format, added our TikTok link and coded for TikTok. However, the icon will not show. If I replace the code "tiktok" with "instagram", "facebook" "youtube" "spotify" literally any other platform it produces the icon. However, it will not produce the TikTok icon as you can see where the blank space is. Can someone please help? Thank you! 

Social Coding Issue.JPG

Replies 6 (6)
Anonymous
Not applicable

It may happens that font awesome library used within it is old one which is 4.7 and there is no tiktok icon within it. 

Further it will be good to use SVG instead of font awesome icons.

Thanks

MS-WEB-DESIGNER
Shopify Partner
3012 181 488

Dear @EatHappyGrub 

We will be happy to help with this.

Click Here to Hire Shopify Store Customization Experts
Boost Conversions & Average Order Value with this
Best App for Sticky Add To Cart
EatHappyGrub
Tourist
8 0 2

Hi Vishvas, That makes total sense! Can you show me what the new code would be? Do I just change "fa fa" to "svg"? 

 

<div class="d-flex velaSocialFooter">
<a target="_blank" href="https://www.facebook.com/eathappygrub">
<i class="fa fa-facebook"></i>
</a>
<a target="_blank" href="https://www.instagram.com/eathappygrub/">
<i class="fa fa-instagram"></i>
</a>
<a target="_blank" href="https://www.tiktok.com/@eathappygrub?">
<i class="fa fa-play"></i>
</a>
<a target="_blank" href="https://www.youtube.com/channel/UC4TQPROX57gRVH6T3xjS3Og/">
<i class="fa fa-youtube"></i>
</a>
</div>

EatHappyGrub
Tourist
8 0 2

This question still needs help if anyone out there has coding experience and can help out, thank you! 

Sb30
Tourist
3 0 2

I need help too!!
Thank you!

pequesandco
New Member
2 0 0

Hey! I also had this issue with my Tiktok icon not appearing on a client site. I figured out a solution using Font Awesome! Check out the steps to enable it on your site below.

 

Step 1: Make a Font Awesome account at fontawesome.com

Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.

 

Step 2: Start a New Project with a Kit at fontawesome.com/start

Using a Font Awesome kit is the quickest and easiest way to get Font Awesome on your website.

Screen Shot 2021-10-10 at 4.05.44 PM.png

 

Step 3: Copy Your Kit's Code and Install on your site. View your Kit at fontawesome.com/kits

Screen Shot 2021-10-10 at 4.08.09 PM.png

Click "Copy Kit Code" and paste it after the <head> tag in your theme.liquid file (Themes > Actions > Edit code > Layout > theme.liquid)

 

This should enable the Tiktok icon on your site.

Tiktok Icon Code: https://fontawesome.com/v5.15/icons/tiktok?style=brands

 

Feel free to reach out if you have questions or future website maintenance needs. 🙂

 

 

Alton Peques

Brand Designer & Strategist at p+co.
www.pequesandcompany.com
contact@pequesandcompany.com
Instagram