Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #801704

    Hey guys,

    I already tried to change the Instagram Social Icon and to add a Snapchat Icon by following each step that is described here: https://kriesi.at/support/topic/use-different-social-icons/#post-251970. That did not work..
    I first downloaded the Icons from Fontello, then I added this Code to the enfold functions.php:

    add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);
    function avia_add_custom_icon($icons)
    {
    $icons[‚instagram‘]	 = array( 'font' =>'fontello', 'icon' => 'F16D');
    $icons[‚snapchatghost‘]	 = array( 'font' =>'fontello', 'icon' => 'F2AC');
    return $icons;
    }
    
    add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
    function avia_add_custom_social_icon($icons)
    {
    $icons[‚instagram‘] = 'instagram';
    $icons['snapchatghost'] = 'snapchatghost';
    return $icons;
    }

    Instead of F16D and F2AC, which I got from the ‘customize code’ tab at fontello I also tried U+F16D and U+F2AC as well as uef16d and uef2ac. Then I uploaded the zip file. But nothing seems to work. I would be very glad if you could help me.

    Thanks!

    • This topic was modified 7 years, 5 months ago by giaco_he.
    #801832

    Hey giaco_he,

    Did you check this article: http://kriesi.at/documentation/enfold/adding-your-own-icon-fonts/ ?

    Best regards,
    John Torvik

    #801937

    Hey John,

    I’ve read it now, these are exactly the steps I already did. Doesn’t work.

    Best regards,

    Giaco

    #802052

    Hi Giaco,

    There seem to be some incorrect quotation marks in your code.

    I have updated your functions.php with this code instead:

    add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);
    function avia_add_custom_icon($icons)
    {
    $icons['instagram']	 = array( 'font' =>'fontello', 'icon' => 'uf16d');
    $icons['snapchatghost']	 = array( 'font' =>'fontello', 'icon' => 'uf2ac');
    return $icons;
    }
    
    add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
    function avia_add_custom_social_icon($icons)
    {
    $icons['instagram'] = 'instagram';
    $icons['snapchatghost'] = 'snapchatghost';
    return $icons;
    }

    I have also relocated it under the line if(isset($avia_config['use_child_theme_functions_only'])) return; as prescribed by our documentation here: http://kriesi.at/documentation/enfold/custom-social-icons/

    Please check your social profiles now. Let us know if you need more help.

    Best regards,
    Sarah

    #802074

    Hey Sarah,

    thank you. The Snapchat icon works, the Instagram one does not. It just displays nothing where the icon should be. Would be great if we could find the problem.
    Second concern: If you hover over the icons, most of them have a colored circle that is displayed (Facebook blue, Pinterest red, etc.).
    However, if you hover over the Snapchat Icon is does not have that effect, it just changes from grey to black (just when you scroll down and the header is white). I like that. How can I get that grey to black hover without the colored circles for all social icons too?

    Best regards,

    Giaco

    • This reply was modified 7 years, 5 months ago by giaco_he.
    #802084

    Hi,

    I noticed that it isn’t in the list of icons. Were you able to upload it properly? Can you try uploading it again?

    Best regards,
    Sarah

    #802085

    Yes I just re-uploaded it

    #803014

    Hi,

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

    #top #wrap_all .av-social-link-snapchatghost:hover a {
        background-color: yellow;
        color: #555555;
    }

    I can see both Snapchat and Instagram icons just fine :)

    Best regards,
    Yigit

    #803066

    Hi Yigit,

    yes all icons are displayed now, that works.

    However, I would like to have NO color hover effect. I just want the icon to change from grey to black when hovered.

    Scroll down at https://edley.de until the header is white and then hover over the Snapchat Icon, you’ll see what I mean.

    I want that grey to black hover effect with every social icon if that’s possible.

    Thanks

    • This reply was modified 7 years, 5 months ago by giaco_he.
    #803074

    Hi,

    Please use following code instead

    #top #wrap_all .social_bookmarks li:hover a {
        background: transparent!important;
        color: black;
    }
    

    Best regards,
    Yigit

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