How to add a TikTok icon to your 17th Avenue theme
The icon library used in our themes, Fontello, does not include a TikTok icon. But fret not! You can add a custom TikTok icon using an SVG. We'll show you how in this tutorial.
This tutorial does not apply to the Clover theme or our Kadence child themes, which have a TikTok icon built in.
How to add a TikTok icon
1. Go to your WordPress dashboard > Appearance > Widgets.
Note: The placement of social icons can vary widely between themes. Most themes display social icons in 2+ different widget areas, so you'll want to consult the theme documentation for your specific theme. Each theme has a "Social Icons" tutorial with in-depth instructions for your theme.
2. Locate your social icons in one of the widget areas.
3. Copy the following code:
<a href="LINK TO YOUR TIKTOK PROFILE" target="_blank" aria-label="Tiktok" alt="TikTok"> <span class="social"><i class="tiktok-svg"> <svg height="13px" width="13px" viewbox="0 0 448 512"><g fill="#000000"> <path d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"/></g></svg></i></span></a>
4. Paste the code right before </div> at the end of your social icons code.
Optional: If you prefer, you can place the TikTok icon in a different position relative to the other icons. The different icon sections should be easy to discern – just paste the TikTok icon code in between two existing icon sections.
5. Now, let's take a look at the code for your new TikTok icon and learn how to customize it.
First line: You'll replace LINK TO YOUR TIKTOK PROFILE with the link/URL of your TikTok profile. Be sure to include the full link, including https://
Second line: Nothing to change here; leave as-is.
Third line: There are three things that can be changed here:
- Height: Change 13px to your desired icon height.
- Width: Change 13px to your desired icon width.
- Icon color: Change #000000 to your desired color hex code.
The rest: Leave as-is.
6. Save the widget, and you're all set! Repeat for any other social icon widgets on your site.
7. Optional: If your icon is not displaying perfectly in line with the other icons, click here and copy the code. Paste this at Appearance > Customize > Additional CSS.
How to add a hover color to your TikTok icon
If you'd like to add a hover color to your TikTok icon, this can be achieved with a simple CSS snippet.
1. Click here and copy the code.
2. Go to Appearance > Customize > Additional CSS.
3. Paste the code at the top of the box. Replace #999999 with your desired color hex code.
4. Click Publish to save.