-
Posts
-
Hi,
I would like to use my own images as social icons (display in main header area), could you please help me do that?
Thank you very much,Olivia
Hey oliviad!
Just insert this code into the child theme functions.php file:
add_filter('avf_default_icons','avia_add_custom_icon', 10, 1); function avia_add_custom_icon($icons) { $icons['apple'] = array( 'font' =>'fontello', 'icon' => 'ue803'); $icons['yelp'] = array( 'font' =>'fontello', 'icon' => 'ue800'); return $icons; } add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1); function avia_add_custom_social_icon($icons) { $icons['Apple'] = 'apple'; $icons['Yelp'] = 'yelp'; return $icons; }Replace “apple” and “yelp” with the name of your social service(s). Then import your custom icon fonts from fontello and replace the icon code (i.e. ue803 and ue800) and the font family if necessary. If you don’t know the codes I recommend to click the “Customize Codes” tab on the fontello.com page to find them. At least go to Enfold > Theme Options and add your new social icons to the header menu.
Best regards,
PeterHi!
No, png images are currently not supported. This feature wold require a theme code customization.
Best regards,
PeterWhere should the font file be imported? I’ve selected a couple icons I want to use and downloaded the files from Fontello, but where should I upload them?
I have the import code in functions.php, so the option shows in the editor, but the icon doesn’t show or doesn’t show the correct icon on the front-end.
Also, is there anything I need to edit to make the colored circle hover-effect work on the custom icon?
Hey Josue,
Thanks for the response. Maybe the video is outdated, but my Enfold theme options don’t have General Settings or an Iconfont Manager (see this screenshot). I’ve been through every theme options screen and there’s no Iconfont Manager anywhere.
I have the latest version of the theme. Any ideas?
Hey!
You are right, the Options structure has changed, the icon font manager is found here now:
Best regards,
JosueOk, a better question: The default font in Enfold includes the icon I want to use already. I used the icon code in my functions file to include it as an option, but the icon is still not showing up.
This is my functions.php code:
add_filter('avf_default_icons','avia_add_custom_icon', 10, 1); function avia_add_custom_icon($icons) { $icons['spotify'] = array( 'font' =>'fontello', 'icon' => 'ue907'); return $icons; } add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1); function avia_add_custom_social_icon($icons) { $icons['Spotify'] = 'spotify'; return $icons; }Any idea why it wouldn’t work on the front-end?
Hey!
I tried that code on my install and it did work, note that it will add the option here:
Cheers!
JosueYea, the option shows okay for me in those header options. The icon just doesn’t show up on the front-end (screenshot).
Am I using the correct icon code/name in my functions.php code? Do I need to use the Fontello-issued name? ie. “spotify-circled” Although I tried that and it didn’t work either.
Hey!
No, i think i found the typo, try with this code:
add_filter('avf_default_icons','avia_add_custom_icon', 10, 1); function avia_add_custom_icon($icons) { $icons['spotify'] = array( 'font' =>'entypo-fontello', 'icon' => 'ue907'); return $icons; } add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1); function avia_add_custom_social_icon($icons) { $icons['Spotify'] = 'spotify'; return $icons; }Best regards,
JosueAwesome, they’re showing up now, thanks.
My other question was: What do I need to do so the custom icons have the same color circle background hover effect as the original social icons?
Hey!
Add this to the Quick CSS:
#top #wrap_all .av-social-link-spotify:hover a{color:#fff; background-color:#46d4fe; }Change as needed.
Cheers!
Josue
- The topic ‘Use different social icons’ is closed to new replies.