-
AuthorPosts
-
April 22, 2016 at 1:47 pm #619928
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 #619960Hey 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, 8 months ago by Yigit.
April 22, 2016 at 3:09 pm #619995That’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 #620011Hi!
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,
YigitApril 22, 2016 at 3:52 pm #620033Cheers 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,
LaurenceApril 22, 2016 at 4:04 pm #620051Hey!
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 nowCheers!
YigitApril 22, 2016 at 4:16 pm #620062Groovy! 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, 8 months ago by AboveDigital. Reason: Extra info
April 25, 2016 at 3:08 pm #621369Hi!
Please add following code to Quick CSS
#top #header .social_bookmarks li:last-child a { overflow: hidden; }
Regards,
YigitApril 26, 2016 at 3:40 pm #622241Thanks Yigit, you’ve been amazing.
Please consider this topic closed.
April 26, 2016 at 3:46 pm #622248Hey!
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 -
AuthorPosts
- The topic ‘Adding Custom Fontello Social Icon to Header’ is closed to new replies.