Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 30, 2017 at 11:25 pm #801704
    giaco_he

    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, 6 months ago by giaco_he.
    May 31, 2017 at 6:43 am #801832
    John Torvik

    Hey giaco_he,

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

    Best regards,
    John Torvik

    May 31, 2017 at 11:01 am #801937
    giaco_he

    Hey John,

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

    Best regards,

    Giaco

    May 31, 2017 at 3:20 pm #802052
    Sarah

    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

    May 31, 2017 at 4:05 pm #802074
    giaco_he

    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, 6 months ago by giaco_he.
    May 31, 2017 at 4:22 pm #802084
    Sarah

    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

    May 31, 2017 at 4:24 pm #802085
    giaco_he

    Yes I just re-uploaded it

    June 2, 2017 at 1:52 pm #803014
    Yigit

    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

    June 2, 2017 at 3:46 pm #803066
    giaco_he

    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, 6 months ago by giaco_he.
    June 2, 2017 at 3:56 pm #803074
    Yigit

    Hi,

    Please use following code instead

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

    Best regards,
    Yigit

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