Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #251407

    Hi,

    I would like to use my own images as social icons (display in main header area), could you please help me do that?
    Thank you very much,

    Olivia

    #251970

    Hey oliviad!

    Just insert this code into the child theme functions.php file:

    
    
    add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);
    function avia_add_custom_icon($icons)
    {
    $icons['apple']	 = array( 'font' =>'fontello', 'icon' => 'ue803');
    $icons['yelp']	 = array( 'font' =>'fontello', 'icon' => 'ue800');
    return $icons;
    }
    
    add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
    function avia_add_custom_social_icon($icons)
    {
    $icons['Apple'] = 'apple';
    $icons['Yelp'] = 'yelp';
    return $icons;
    }
    

    Replace “apple” and “yelp” with the name of your social service(s). Then import your custom icon fonts from fontello and replace the icon code (i.e. ue803 and ue800) and the font family if necessary. If you don’t know the codes I recommend to click the “Customize Codes” tab on the fontello.com page to find them. At least go to Enfold > Theme Options and add your new social icons to the header menu.

    Best regards,
    Peter

    #251971

    Hi, thanks for your answer. Can I use png image instead? Thanks!

    #252493

    Hi!

    No, png images are currently not supported. This feature wold require a theme code customization.

    Best regards,
    Peter

    #263003

    Where should the font file be imported? I’ve selected a couple icons I want to use and downloaded the files from Fontello, but where should I upload them?

    I have the import code in functions.php, so the option shows in the editor, but the icon doesn’t show or doesn’t show the correct icon on the front-end.

    Also, is there anything I need to edit to make the colored circle hover-effect work on the custom icon?

    #263008

    Hi @dmoz!

    Refer to this video:

    Best regards,
    Josue

    #263016

    Hey Josue,

    Thanks for the response. Maybe the video is outdated, but my Enfold theme options don’t have General Settings or an Iconfont Manager (see this screenshot). I’ve been through every theme options screen and there’s no Iconfont Manager anywhere.

    I have the latest version of the theme. Any ideas?

    #263018

    Hey!

    You are right, the Options structure has changed, the icon font manager is found here now:

    Best regards,
    Josue

    #263022

    Ok, a better question: The default font in Enfold includes the icon I want to use already. I used the icon code in my functions file to include it as an option, but the icon is still not showing up.

    This is my functions.php code:

    add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);
    function avia_add_custom_icon($icons)
    {
    $icons['spotify']	 = array( 'font' =>'fontello', 'icon' => 'ue907');
    return $icons;
    }
    
    add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
    function avia_add_custom_social_icon($icons)
    {
    $icons['Spotify'] = 'spotify';
    return $icons;
    }

    Any idea why it wouldn’t work on the front-end?

    #263026

    Hey!

    I tried that code on my install and it did work, note that it will add the option here:

    Cheers!
    Josue

    #263029

    Yea, the option shows okay for me in those header options. The icon just doesn’t show up on the front-end (screenshot).

    #263035

    Am I using the correct icon code/name in my functions.php code? Do I need to use the Fontello-issued name? ie. “spotify-circled” Although I tried that and it didn’t work either.

    #263038

    Hey!

    No, i think i found the typo, try with this code:

    add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);
    function avia_add_custom_icon($icons)
    {
    $icons['spotify']	 = array( 'font' =>'entypo-fontello', 'icon' => 'ue907');
    return $icons;
    }
    
    add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
    function avia_add_custom_social_icon($icons)
    {
    $icons['Spotify'] = 'spotify';
    return $icons;
    }

    Best regards,
    Josue

    #263043

    Awesome, they’re showing up now, thanks.

    My other question was: What do I need to do so the custom icons have the same color circle background hover effect as the original social icons?

    #263044

    Hey!

    Add this to the Quick CSS:

    #top #wrap_all .av-social-link-spotify:hover   a{color:#fff; background-color:#46d4fe; }
    

    Change as needed.

    Cheers!
    Josue

    #263046

    Great! Thanks so much for your quick help!

    #263051

    You are welcome, glad we could help :)

    Regards,
    Josue

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘Use different social icons’ is closed to new replies.