TikTok Icon Social Media Buttons

Hey lauragrashoff,
The TikTok icon is not available on Fontello.com so you need to create it by finding an SVG and converting it on Fontello to create the icon font

The icon font will be black and white a colored SVG won’t work. But if you find a png with a transparent background then you can convert it here. For example I found a TikTok icon here and downloaded it as a SVG and then uploaded it to Fontello which converted it for me. This is the fontello-tiktok.zip file I’m using in this example.
Then to create the TikTok social profile follow the steps outlined here in our documentation.
For example, I added this code to the end of my child theme functions.php file in Appearance ▸ Editor, If you are not using a child theme I recommend the WPcode plugin this plugin supports PHP code snippets, JavaScript code snippets, & CSS code snippets and allows you to export and import your custom code snippets to other sites that you may have or as a backup.

function avia_add_custom_icon($icons) {
$icons['tiktok'] = array( 'font' =>'fontello', 'icon' => 'ue800');
return $icons;
}
add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);

function avia_add_custom_social_icon($icons) {
$icons['TikTok'] = 'tiktok';
return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
add_filter('avia_social_share_link_arguments', 'avia_add_social_share_link_arguments', 10, 1);
function avia_add_social_share_link_arguments($args){
    $tiktok = array('tiktok' => array("encode"=>true, "encode_urls"=>false, "pattern" => "https://www.tiktok.com/", 'label' => __("Share on TikTok",'avia_framework')));
    $args = array_merge($tiktok, $args);
    return $args;
}

Then I enabled it at Enfold Theme Options ▸ Social Profiles ▸ Your social profiles

Now it shows on the frontend:

Now to add the on mouse-over color add this css to your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #wrap_all .av-social-link-tiktok:hover a{
    color:#fff; 
    background-color:#00f2ea; 
}

Now go to the theme options Enfold Theme Options ▸ Blog Layout ▸ Profile Links At The Bottom Of Your Blog Post and enable the TikTok item:

and now on blog posts when the share box shows TikTok will be included:

Best regards,
Mike

Hi,
If you followed the steps above carefully and copied the code from the forum and not an email notification, and still can’t achieve this then please include an admin login in the Private Content area below so we can assist.

Best regards,
Mike

Hi,
Thanks for the login, I see that you added the PHP function to the plugin Simple Custom CSS and JS as a CSS code snippet:

That is why it didn’t work, the Simple Custom CSS and JS plugin doesn’t allow PHP snippets, so I moved the snippet to the WPcode plugin that I see you had installed.
I then added tiktok to your social profiles, but you will need to adjust the URL to yours.
Now the icon is showing, please clear your browser cache and check.

It is also available as a icon in your elements:

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike