Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • August 3, 2015 at 3:50 pm #482169
    Barnez1

    Hi,

    I have imported 2 x fontella icons. The PayPal icon is place in the header socket (to the right of the email icon) and the Tumblr icon is in the footer in the Share section (to the right of the google+ icon). The issue is that the icons are not visible, although the link, hover over style and alt text are functioning correctly. Any ideas why this might be happening?

    August 4, 2015 at 7:18 am #482525
    Ismael

    Hi Barnez1!

    Thank you for using Enfold.

    How did you apply the font icon to the social icon? You can follow this: http://kriesi.at/documentation/enfold/custom-social-icons/

    Regards,
    Ismael

    August 4, 2015 at 9:30 am #482584
    Barnez1

    Hi Ismael,

    Many thanks for your reply. I was using a slightly different code for the PayPal icon which I found in a previous enfold support post.

    When I change the code to that suggested in the linked documentation page and the icon code to the code for the imported fontello PayPal icon (ue911 – found from the icon shortcode) no icon appears (although the link is there), and the alt text is Icon_name. The new PayPal option is listed and selected in Social Profiles >> Social Icon. Here is the code I have inserted into functions.php:

    
// Register new icon as a theme icon
function avia_add_custom_icon($icons) {
	$icons['icon_name']	 = array( 'font' =>'fontello', 'icon' => 'ue911');
	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['Icon Label'] = 'icon_name';
	return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
    • This reply was modified 8 years, 9 months ago by Barnez1. Reason: $icons['PayPal'] = 'icon_name'; reverted back to the original $icons['Icon Label'] = 'icon_name';
    August 6, 2015 at 3:32 pm #483949
    Barnez1

    Almost complete.

    I used a different imported fontello PayPal icon code (ue800) and now I have the PayPal icon showing in the header socket. There are two minor issues to complete:

    1. The ALT text on hover is still showing as Icon_name rather than PayPal. I’ve tried changing this in the functions code above (icon_name => PayPal), but this hasn’t helped.
    2. The hover over is not behaving as per the other two icons in the socket. This is what I am using in the style.css:

    
#top .social_bookmarks_twitter:hover  a {color:#fff; background-color:#575757 !important; }
#top .social_bookmarks_mail:hover  a {color:#fff; background-color:#575757 !important; }
#top .social_bookmarks_paypal:hover  a {color:#fff; background-color:#575757 !important; }

    Any ideas?

    August 6, 2015 at 5:50 pm #484063
    Andy

    Hey!

    glad you could almost fix the issue. Please refer to this solution for customizing your paypal icon tooltip: https://kriesi.at/support/topic/how-to-change-text-in-tooltip-for-social-media-icons-in-header/#post-319550

    For hover color of your new paypal icon use this CSS code in Quick CSS field: 

    li.social_bookmarks_icon_name.av-social-link-icon_name.social_icon_3 a:hover {
background-color: #575757 !important;
color: white;
}

    Cheers!
    Andy

    August 6, 2015 at 7:52 pm #484122
    Barnez1

    Hi Andy,

    Many thanks for looking into this.

    For point 1, I checked the link you sent and looked into the helper-social-media.php, and may have to draft in some help to customise as there is no PayPal tooltip icon there to adjust.
    For point 2, that is brilliant.

    Cheers.

    August 9, 2015 at 10:59 pm #484965
    Josue

    Hi,

    Can you please create us a WordPress administrator account? post it here as a private reply.

    Regards,
    Josue

    August 10, 2015 at 8:59 am #485096
    Barnez1

    Hi Josue,

    Many thanks for the offer!
    Here are the details.

    Cheers

    • This reply was modified 8 years, 8 months ago by Barnez1.
    August 11, 2015 at 2:50 am #485698
    Josue

    Hey!

    Check it now, i edited the code in your child theme functions.php.

    Best regards,
    Josue

    August 11, 2015 at 8:00 am #485758
    Barnez1

    Hi Josue,

    That’s it! Resolved ;)

    Many thanks for making the adjustments to the functions.php file.

    Best regards

    August 11, 2015 at 8:16 am #485764
    Josue

    You are welcome, glad to help :)

    Regards,
    Josue

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Imported fontella icons but not showing correctly on site’ is closed to new replies.