Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 5, 2022 at 3:42 pm #1334385
    Grobi

    Hi Support-team,
    have a good start into the new year!

    I want to include a social share icon for Tiktok that I can use as a secondary menu above the main navigation. In this support area, I learned to go through these steps – which I have already taken:
    • Download the tiktok-logo as a png image
    • Convert into svg
    • upload SVG to the fontello-website, save it there
    • download font icon from fontello on my site
    • upload font icon to Iconfont Manager

    Afterwards i included this code into my child-functions.php:

    // Register new icon as a theme icon
    function avia_add_custom_icon($icons) {
    $icons[‘icon_name’] = array( ‘font’ =>’fontello’, ‘icon’ => ‘ue800’);
    return $icons;
    }
    add_filter(‘avf_default_icons’,’avia_add_custom_icon’, 10, 1);

    // Add new icon as an option for social icons
    function avia_add_custom_social_icon($icons) {
    $icons[‘Icon Label’] = ‘icon_name’;
    return $icons;
    }
    add_filter(‘avf_social_icons_options’,’avia_add_custom_social_icon’, 10, 1);

    I have changed ‘icon_name’ into ‘fontello‘ which I found in enfold / import/export / icon-manager.
    Finally, I chosed ‘icon lable’ in the the social media profiles and added the link of the tiktok address.

    Unfortunately, the front end now shows a pencil symbol instead of the Tiktok logo (the link to tiktok works!) and no color is displayed on mouseover.
    What can I do?

    Best regards
    Grobi

    January 6, 2022 at 5:17 am #1334468
    Ismael

    Hey Grobi,

    Thank you for the inquiry.

    You may need to rename the font icon and the new social icon. Would you mind posting the login details in the private field? We would like to inspect the new icon in the dashboard. We may also have to edit the code in the functions.php file a bit. Please make sure that the Appearance > Editor panel is accessible.

    Best regards,
    Ismael

    January 6, 2022 at 4:02 pm #1334569
    Grobi

    Hi Ismael,
    of course – see the credentials below.
    Thanks
    Best regards
    Grobi

    January 7, 2022 at 5:08 am #1334629
    Ismael

    Hi,

    Thank you for the info.

    We adjusted the social icon name in the filters within the functions.php file and selected the new social icon in the Enfold > Social Profiles panel. It should be displaying correctly now.

    This is the updated snippet in the functions.php file.

    // Register new icon as a theme icon
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);

// Add new icon as an option for social icons
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);

    Best regards,
    Ismael

    February 23, 2022 at 3:45 pm #1342011
    Grobi

    Hi Ismael,
    first of all – sorry for my late reply and thanks for your helpful thaughts.
    Now as I tried it out on some other sites I just can say It works brilliant.
    But there is one thing you perhaps can fix: when you move the mouse over the tiktok-Symbol there is no hover color. Can you tell me how to repair that?

    Best regards
    Grobi

    February 23, 2022 at 7:45 pm #1342050
    Yigit

    Hi Grobi,

    Please add following code to Quick CSS field in Enfold theme options > General Styling tab

    
#top #wrap_all .av-social-link-tiktok:hover a, #top #wrap_all .av-social-link-tiktok a:focus {
  background-color: pink;
  color: white;
}

    Best regards,
    Yigit

    March 8, 2022 at 1:29 pm #1343613
    Grobi

    Hi Yigit,
    sorry for the very late reply!
    Thank you very much, works perfect!!!
    (and I take the pink ;-)

    Best regards
    Grobi

    March 8, 2022 at 1:32 pm #1343616
    Yigit

    Hi Grobi,

    You are welcome! :)

    For your information, you can take a look at Enfold documentation here – https://kriesi.at/documentation/enfold/

    If you have any other questions or issues, feel free to start a new thread under Enfold sub forum and we will gladly try to help you :)

    Enjoy the rest of your day!

    Best regards,
    Yigit

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘creating a new social share icon – tiktok’ is closed to new replies.