Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 22, 2016 at 1:47 pm #619928
    AboveDigital

    Hi,

    I’ve tried to solve this after following the following threads, but to no avail…

    https://kriesi.at/support/topic/custom-social-bar-icons-replaceadd-enfold/
    https://kriesi.at/support/topic/adding-custom-social-icons/

    Here’s what I’ve done so far:
    • Uploaded my custom font containing only one icon to my site. It’s called ‘subscribe’ and the icon is ue800
    • In my register-admin-options.php file I’ve placed ‘Subscribe’ => ‘subscribe’,
    • In my functions.php file I’ve placed the following:

    add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);
function avia_add_custom_icon($icons)
{
$icons['subscribe']	 = array( 'font' =>'subscribe', 'icon' => 'ue800');
return $icons;
}

    I’m unfortunately still not seeing my icon as an option in the Social Profiles section dropdown. I wasn’t entirely sure what I was meant to put after $icons[‘ so I’m thinking that’s the issue?

    I’ve created an admin account for you and have placed the logins in the Private Content section of this post in case that helps. Thanks for your help!

    April 22, 2016 at 2:19 pm #619960
    Yigit

    Hey AboveDigital!

    I added following code to Functions.php file 

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

    please review your website now

    Best regards,
    Yigit

    • This reply was modified 8 years ago by Yigit.
    April 22, 2016 at 3:09 pm #619995
    AboveDigital

    That’s great, thanks Yigit!

    My styling seems to be being overwritten though; any idea why?

    I’m currently applying the following CSS:

    #header_main nav .social_bookmarks {
    overflow: visible!important;
}

#top #header .social_bookmarks li:last-child a:before {
    position: absolute;
    bottom: 0px!important;
}

#top #header .social_bookmarks li:last-child a {
    font-size: 127px!important;
    padding: 0 93px 0 4px!important;
    border: 2px solid #fff;
    position: absolute;
    bottom: 0px!important;
}

    To achieve the following look: http://prnt.sc/avfn2s

    After applying I’m still currently getting this: http://prnt.sc/avfnl4

    April 22, 2016 at 3:28 pm #620011
    Yigit

    Hi!

    I added following code to Style.css file of your child theme 

    li.av-social-link-subscribe_icon a:before {
    font-size: 78px!important;
}

li.av-social-link-subscribe_icon, li.av-social-link-subscribe_icon a {
    width: 60px!important;
}

    Please review your website now

    Regards,
    Yigit

    April 22, 2016 at 3:52 pm #620033
    AboveDigital

    Cheers Yigit, my CSS styling appears to be working now. I’m starting to think it was just connection issues!

    One last thing: the hover tooltip on that button now says ‘Subscribe_icon’ rather than just ‘Subscribe’. I realise this pulls through from the functions.php file but when I tried to change it there it no longer recognised the font. Any idea how I can change this?

    Thanks,
    Laurence

    April 22, 2016 at 4:04 pm #620051
    Yigit

    Hey!

    Not really sure why it did not work, everything seems normal.
    I have added additional code to bottom of Functions.php file, please review your website now

    Cheers!
    Yigit

    April 22, 2016 at 4:16 pm #620062
    AboveDigital

    Groovy! I’ve just realised that the hover state seems to be triggered when my cursor is pretty far from the button (see screenshot).

    This seems to be triggered by the fact that my font size is so huge but I don’t see a way around that as Fontello automatically makes my custom icon tiny.

    Any thoughts?

    • This reply was modified 8 years ago by AboveDigital. Reason: Extra info
    April 25, 2016 at 3:08 pm #621369
    Yigit

    Hi!

    Please add following code to Quick CSS

    #top #header .social_bookmarks li:last-child a { overflow: hidden; }

    Regards,
    Yigit

    April 26, 2016 at 3:40 pm #622241
    AboveDigital

    Thanks Yigit, you’ve been amazing.

    Please consider this topic closed.

    April 26, 2016 at 3:46 pm #622248
    Yigit

    Hey!

    You are welcome!
    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

    Regards,
    Yigit

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Adding Custom Fontello Social Icon to Header’ is closed to new replies.