Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #811337

    Hey guys,

    Is there a way to update the instagram icon in enfold? I want to use instagrams new icon, currently Enfold is using the older one. Im using the icon in my header, so its controlled in the social profiles tab of enfold.

    Thanks!
    Chris

    http://www.ccyran.com

    • This topic was modified 6 years, 9 months ago by ccyran.
    #811493

    Hey Chris,

    You can download the icon from fontello.com. I believe Font Awesome has the newest icon. After downloading it, you can upload it into Enfold through Enfold > Import/Export, then add it to the theme options by following the instructions here: http://kriesi.at/documentation/enfold/custom-social-icons/

    Please let us know if you need further help!

    Best regards,
    Sarah

    #811874

    Hey Sarah,

    I tried following that guide but no luck.

    Apologies for all the updates, the icon appears in the dropdown menu now as “Icon Label”, but it’s not visible on my website :(. Also, I want to remove that colored highlight over the icons.

    http://www.ccyran.com

    Best,
    Chris

    • This reply was modified 6 years, 9 months ago by ccyran.
    #811931

    Hi Chris,

    That’s okay! :)

    I logged in to nudge your code in the right direction.

    The icon code in functions.php was wrong, so I changed it.

    // Register new icon as a theme icon
    function avia_add_custom_icon($icons) {
    	$icons['instagram']	 = array( 'font' =>'instagram', 'icon' => 'uf16d');
    	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['IG New'] = 'instagram';
    	return $icons;
    }
    add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);

    The icon now shows up in your website! :)

    To clarify: Do you want to remove the hover color of the social icons?
    You can use this in Quick CSS:

    #top #wrap_all .av-social-link-instagram:hover a {background:none;}
    #top #wrap_all .av-social-link-linkedin:hover  a {background:none;}

    You can also use this:

    #top #wrap_all .social_bookmarks li:hover a {background:none;}

    Best regards,
    Sarah

    #811934

    Sarah you are the friggin best!

    This is PERFECT! Quick question if it isn’t too bothersome…

    1. How did you know how to fix it?
    2. Where did you get the icon code from? I was looking in the .zip folder but it only showed “61805”

    Thanks again! I seriously seriously seriously appreciate your help and quick response. You rock!

    #811978

    Hi Chris,

    Of course, it’s not bothersome at all! You can see the icon code when you hover over it in the layout builder.
    http://i.imgur.com/8wLH1t6.jpg

    You’re not the first one to get the icon code wrong. I’ll make a note to update our documentation to explain how to do it! :)

    And you’re very welcome. We’re happy to help. Do you have any other questions about this topic, or can we mark this as closed? :) As always, you can open a new one for other concerns.

    Best regards,
    Sarah

    #811998

    Ah I see!

    Second best thing about Enfold and the support from people like you is the valuable info I learn about CSS and web platforms. Im good on this topic, you can mark it as closed.

    Thanks again! :)

    #812091

    Hi,

    Thanks for the kind words :-)

    Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Updated Instagram Icon’ is closed to new replies.