-
Posts
-
I would like to add a social media icon for Houzz at the top of the page. I can create the icon, but can you please let me know how I can add the icon and link to the top of the page?
Thank you!
.Hey reelhomes2017,
Try going to Enfold Theme Options > Social Profiles > Your social profiles and click the green plus sign, then choose your new profile.Best regards,
MikeThanks for your response! Yes, I tried that, but the social media option (Houzz) I want isn’t included in the ones provided in the drop down list and I didn’t see an option to add your own type of social media icon.
Best Regards,
JanisHi,
Please follow this solution for Adding Custom Social Icons to the Theme Options
After you download the Fontello icon, this is an example of what your code should look like:function avia_add_custom_icon($icons) { $icons['houzz'] = array( 'font' =>'houzz', 'icon' => 'ue800'); return $icons; } add_filter('avf_default_icons','avia_add_custom_icon', 10, 1); function avia_add_custom_social_icon($icons) { $icons['Houzz'] = 'houzz'; return $icons; } add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);Your new icon may appear at the bottom of the list.
Best regards,
MikeThank you, I want to verify that I am doing this correctly:
Step 1: Add this css to Enfold/General Styling/Quick CSS –
// Register new icon as a theme icon
function avia_add_custom_icon($icons) {
$icons[‘icon_name’] = array( ‘font’ =>’fontello’, ‘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[‘Icon Label’] = ‘icon_name’;
return $icons;
}
add_filter(‘avf_social_icons_options’,’avia_add_custom_social_icon’, 10, 1);Step 2: Go to Enfold/Import/Export and click on the Upload/Select Fontello Zip Font?
Step 3: Add the code in the paragraph below after the following line in the Functions.php file if(isset($avia_config[‘use_child_theme_functions_only’])) return;
function avia_add_custom_icon($icons) {
$icons[‘houzz’] = array( ‘font’ =>’houzz’, ‘icon’ => ‘ue800’);
return $icons;
}
add_filter(‘avf_default_icons’,’avia_add_custom_icon’, 10, 1);function avia_add_custom_social_icon($icons) {
$icons[‘Houzz’] = ‘houzz’;
return $icons;
}
add_filter(‘avf_social_icons_options’,’avia_add_custom_social_icon’, 10, 1);Step 4: At this point, I should see an Icon that I can use in the drop-down menu of the Enfold/Social Profiles section?
Thanks for your assistance.
Hi,
I have adjust the code here and tested on my localhost
Step 1: add this code to your functions.php
under: if(isset($avia_config[‘use_child_theme_functions_only’])) return;function avia_add_custom_icon($icons) { $icons['houzz'] = array( 'font' =>'fontello', 'icon' => 'uf27c'); 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['Houzz'] = 'houzz'; return $icons; } add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);Step 2: Download the Houzz font from http://fontello.com/ (use the fontawesome one) and upload to Enfold/Import/Export and click on the Upload/Select Fontello Zip Font
Step 3: At this point, you should see the Icon that you can use in the drop-down menu of the Enfold/Social Profiles section.Best regards,
MikeHi,
Thanks for the feedback. Could you post a link to the site in question so that we can take a closer look please?
Best regards,
RikardHi,
Yes, the image cant work, that is normal.
Have you loaded a custom font from the Options Panel?Best regards,
BasilisI uploaded a zip file with what I thought had the correct font. I uploaded it as per Steps 2 and 3 above.
Thanks
Hi,
This is now fixed, I have replaced this code:
function avia_add_custom_icon($icons) { $icons['houzz'] = array( 'font' =>'fontello', 'icon' => 'uf27c'); 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['Houzz'] = 'houzz'; return $icons; } add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);to:
function avia_add_custom_icon($icons) { $icons['houzz'] = array( 'font' =>'houzz', 'icon' => 'uf27c'); 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['Houzz'] = 'houzz'; return $icons; } add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);Let us know if you need further assistance :)
Best regards,
NikkoI’m sorry, I have one other request from the client. Is there a way we can get the Houzz logo at the top to highlight to a green color upon mouseover? The other links all highlight to a color.
Many Thanks!
Hi,
I added this code in the General Styling > Quick CSS field:#top #wrap_all .av-social-link-houzz:hover a{ color:#fff; background-color: #9fae37; }It seems to be working now please check.
Best regards,
Mike
- The topic ‘Add a new social icon to top of page’ is closed to new replies.