Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 17, 2021 at 8:55 pm #1294934
    ibcagigal

    Hello good Morning
    How can I add an icon that does not come in the theme in the header?

    I am using the code that comes in the documentation but I get an error when I put it, the fontello zip file is already imported

    This is the code I am using:

    `
    // Register new icon as a theme icon

    function avia_add_custom_icon($icons) {
    $icons[‘tiktok’] = array( ‘font’ =>’tiktok’, ‘icon’ => ‘ue801’);
    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);

    • This topic was modified 4 years, 10 months ago by ibcagigal.
    April 19, 2021 at 10:48 am #1295213
    Nikko

    Hi ibcagigal,

    Thanks for giving us admin access.
    I have checked on your site and could verify the character code is correct but I could not find the code you posted in functions.php, where is this defined?
    Also, I would suggest updating your site to the latest version of Enfold (4.8.1), please make sure to have a backup first.

    Best regards,
    Nikko

    April 21, 2021 at 4:35 am #1295664
    ibcagigal

    Hello, good day, I have reviewed the site and the code you entered is very good but now I want to add more sources and when doing it with the same code it does not show me the icons I do not know what happens since when importing new sources it shows them but in social networks it does not It shows them attached images as evidence as well as the code

    https://photos.app.goo.gl/XTMzcfys41T3zhUS9

    https://photos.app.goo.gl/MmUocaxfw7SdReXG8

    https://photos.app.goo.gl/vnDm938Mpo22JMrK7

     // Register new icon as a theme icon Dailymotion
function avia_add_custom_dailymotion_icon($icons) {
$icons['Dailymotion'] = array( 'font' =>'dailymotion', 'icon' => 'ue800');
return $icons;
}
add_filter('avf_default_icons','avia_add_custom_dailymotion_icon', 10, 1);

// Add new icon as an option for social icons Dailymotion
function avia_add_custom_dailymotion_social_icon($icons) {
$icons['Dailymotion'] = 'dailymotion';
return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_dailymotion_social_icon', 10, 1);

    Thank you

    April 22, 2021 at 3:06 am #1295907
    Nikko

    Hi ibcagigal,

    Thanks I have merged both Dailymotion and Tiktok code and it seems to work properly now:

    // Register new icon as a theme icon
function avia_add_custom_tiktok_icon($icons) {
	$icons['tiktok'] = array( 'font' =>'tiktok', 'icon' => 'ue801');
	$icons['dailymotion'] = array( 'font' =>'dailymotion', 'icon' => 'ue800');
	return $icons;
}
add_filter('avf_default_icons','avia_add_custom_tiktok_icon', 10, 1);

// Add new icon as an option for social icons
function avia_add_custom_tiktok_social_icon($icons) {
	$icons['TikTok'] = 'tiktok';
	$icons['Dailymotion'] = 'dailymotion';
	return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_tiktok_social_icon', 10, 1);

    The dailymotion icon is small and does not align well with other icons, I have added this in your Quick CSS in order to make it bigger and align it (you can adjust the values as you see fit):

    [data-av_iconfont='dailymotion'] {
    font-size: 22px !important;
}

[data-av_iconfont='dailymotion']:before {
    position: relative;
    top: 2px;
}

    Best regards,
    Nikko

    April 22, 2021 at 8:41 am #1295958
    ibcagigal

    Hello and I thank you very much for your help, another question to create the hover effect, how would the css code be or what improvement would have to be done so that all of them are the same with that effect
    attached image

    https://photos.app.goo.gl/QcM5tnM9gVnhApwv5

    April 22, 2021 at 12:12 pm #1296016
    Nikko

    Hi ibcagigal,

    You’re welcome :)
    Please try adding this CSS code (just change the colors as you see fit):

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

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

    Best regards,
    Nikko

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.