Tagged: custom social icons, icons, socket
-
AuthorPosts
-
August 9, 2022 at 4:33 am #1361184
I thought I was done, but I’ve now been asked to add payment icons to the socket only. Since that’s where the social icons would normally appear, I followed the documentation and found some additional instructions in this help area but I’m doing something wrong because they’re not appearing in the drop-down menu under social profiles. I’m adding a total of 9 (yeah it’s a lot). Can someone please check my code? I think I may have been too literal in the changes it said to make.
// Register new icon as a theme icon function avia_add_custom_icon($icons) { $icons['Visa'] = array( 'font' =>'fontello', 'icon' => 'uf1f0'); return $icons; $icons['Master Card'] = array( 'font' =>'fontello', 'icon' => 'uf1f1'); return $icons; $icons['Discover'] = array( 'font' =>'fontello', 'icon' => 'uf1f2'); return $icons; $icons['Amex'] = array( 'font' =>'fontello', 'icon' => 'uf1f3'); return $icons; $icons['PayPal'] = array( 'font' =>'fontello', 'icon' => 'uf1f4'); return $icons; $icons['Stripe'] = array( 'font' =>'fontello', 'icon' => 'uf1f5'); return $icons; $icons['Apple'] = array( 'font' =>'fontello', 'icon' => 'uf179'); return $icons; $icons['Android'] = array( 'font' =>'entypo-fontello', 'icon' => 'ue91c'); return $icons; $icons['Venmo'] = array( 'font' =>'fontello', 'icon' => 'uf30f'); 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['uf1f0'] = 'Visa'; $icons['uf1f1'] = 'Master Card'; $icons['uf1f2'] = 'Discover'; $icons['uf1f3'] = 'Amex'; $icons['uf1f4'] = 'PayPal'; $icons['uf1f5'] = 'Stripe'; $icons['uf179'] = 'Apple'; $icons['ue91c'] = 'Android'; $icons['uf30f'] = 'Venmo'; return $icons; } add_filter('avf_social_icons_options','av
THANK YOU!!
August 9, 2022 at 6:12 am #1361191Hi Sozo,
Can you try to use this code instead:
// Register new icon as a theme icon function avia_add_custom_icon($icons) { $icons['Visa'] = array( 'font' =>'fontello', 'icon' => 'uf1f0'); $icons['Master Card'] = array( 'font' =>'fontello', 'icon' => 'uf1f1'); $icons['Discover'] = array( 'font' =>'fontello', 'icon' => 'uf1f2'); $icons['Amex'] = array( 'font' =>'fontello', 'icon' => 'uf1f3'); $icons['PayPal'] = array( 'font' =>'fontello', 'icon' => 'uf1f4'); $icons['Stripe'] = array( 'font' =>'fontello', 'icon' => 'uf1f5'); $icons['Apple'] = array( 'font' =>'fontello', 'icon' => 'uf179'); $icons['Android'] = array( 'font' =>'entypo-fontello', 'icon' => 'ue91c'); $icons['Venmo'] = array( 'font' =>'fontello', 'icon' => 'uf30f'); 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['uf1f0'] = 'Visa'; $icons['uf1f1'] = 'Master Card'; $icons['uf1f2'] = 'Discover'; $icons['uf1f3'] = 'Amex'; $icons['uf1f4'] = 'PayPal'; $icons['uf1f5'] = 'Stripe'; $icons['uf179'] = 'Apple'; $icons['ue91c'] = 'Android'; $icons['uf30f'] = 'Venmo'; return $icons; } add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
Hope this helps.
Best regards,
NikkoAugust 9, 2022 at 6:34 am #1361201Hey Nikko,
Thanks for the code, unfortunately, it didn’t do anything. Let me make sure I’m understanding everything correctly. After I’ve added the code, these icons should appear in the “Social Profiles” tab, of the enfold menu correct? Enable the icons we’ve just added etc, Go to the footer tab, make your selection and the icons should appear on site.They’re not appearing in the Social Profiles tab at all.
August 9, 2022 at 7:15 am #1361203Here are some admin credentials as well.
[moved to private content]
I don’t want to create another thread, so if you wouldn’t mind….Can you please look (SEE PRIVATE DATA)
I’ve deleted and recreated that page several times and the content container is underneath the header, so you can’t see the part of the page at all, but it only happens on mobile. It only happens on this main page.
Originally, it worked fine. Then I wanted to use the colored section but since it’s a woo commerce page, the enfold editor is disabled. So the option (per the documentation) was to add code to enable it, which worked but caused other problems, so I removed it. So I, tried option 2 which was to create a normal page and used the woo grid shortcode to display items and use that as the default shop page. While that worked in part, woo commerce had a fit and it caused issues. So I deleted that page and just set everything back to default. Only, now, the menu overlaps the contents of the page on mobile devices.
Thanks!
August 10, 2022 at 7:38 am #1361306Hi Sozo,
I apologize, the code I gave is incorrect (I only changed the upper part of the code, the lower part of the code was wrong which I did not notice), use this code instead:
// Register new icon as a theme icon function avia_add_custom_icon($icons) { $icons['visa'] = array( 'font' =>'fontello', 'icon' => 'uf1f0'); $icons['master_card'] = array( 'font' =>'fontello', 'icon' => 'uf1f1'); $icons['discover'] = array( 'font' =>'fontello', 'icon' => 'uf1f2'); $icons['amex'] = array( 'font' =>'fontello', 'icon' => 'uf1f3'); $icons['payPal'] = array( 'font' =>'fontello', 'icon' => 'uf1f4'); $icons['stripe'] = array( 'font' =>'fontello', 'icon' => 'uf1f5'); $icons['apple'] = array( 'font' =>'fontello', 'icon' => 'uf179'); $icons['android'] = array( 'font' =>'entypo-fontello', 'icon' => 'ue91c'); $icons['venmo'] = array( 'font' =>'fontello', 'icon' => 'uf30f'); 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['Visa'] = 'visa'; $icons['Master Card'] = 'master_card'; $icons['Discover'] = 'discover'; $icons['Amex'] = 'amex'; $icons['PayPal'] = 'payPal'; $icons['Stripe'] = 'stripe'; $icons['Apple'] = 'apple'; $icons['Android'] = 'android'; $icons['Venmo'] = 'venmo'; return $icons; } add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
Let me make sure I’m understanding everything correctly. After I’ve added the code, these icons should appear in the “Social Profiles” tab, of the enfold menu correct? Enable the icons we’ve just added etc, Go to the footer tab, make your selection and the icons should appear on site.
Yes, it should appear in the Social Profiles tab and you can add those icons there and then in the Footer tab just enable Social Icons.Best regards,
NikkoAugust 10, 2022 at 7:47 am #1361307Hi Sozo,
I’ve deleted and recreated that page several times and the content container is underneath the header, so you can’t see the part of the page at all, but it only happens on mobile. It only happens on this main page.
The reason why it happens in mobile is because of this code in Quick CSS:@media only screen and (max-width: 990px) { .responsive.html_mobile_menu_tablet #top.home #wrap_all #header { position: absolute; } .html_mobile_menu_tablet #top.home #wrap_all .av_header_transparency { background: transparent; } }
specifically, this part of the code:
.responsive.html_mobile_menu_tablet #top.home #wrap_all #header { position: absolute; }
once that is removed, you will see it show properly.
Best regards,
NikkoAugust 10, 2022 at 7:57 am #1361308Hi Nikko,
Thanks again for helping and fixing the code. Unfortunately, it still doesn’t work. I’ve cleared the cache on the server, the browser, even logged in from a different browser and checked on mobile and it’s still not working.Would you mind taking a look again, please?
Thank you!August 10, 2022 at 8:07 am #1361309Oh my goodness…I’m so dumb! I completely overlooked that. That’s for the front end, not the subdomains. Thank you!!
August 11, 2022 at 5:05 am #1361399Hi Sozo,
No worries, it happens to the best of us :D
Just let us know if you need further assistance.Best regards,
NikkoAugust 11, 2022 at 5:30 am #1361401Hi Nikko,
I do still need help, I think you missed the other reply. The code you provided still doesn’t work. Can you take another look? Thank you!
August 11, 2022 at 8:37 am #1361419Hi Sozo,
I have checked the code and tried to modify it to test why it’s not working however it launches an error when I updated functions.php, I apologize for this, please re-add the content in functions.php (I tried to re-add but it’s not working and just shows an error).
Also, instead of directly adding codes to the parent theme (Enfold), please use a child theme instead so the modifications/tweaks like the one I gave won’t be lost during the theme update.
You can get the child theme and find instructions on how to use it: https://kriesi.at/documentation/enfold/child-theme/ (make sure to import parent theme options)Best regards,
NikkoAugust 11, 2022 at 9:00 am #1361426YOU BROKE THE SITE!!! Ha ha! It’s all good, I’m glad I was still awake (it’s in the middle of the night here) though, so I could fix it quickly.
Thank for trying to fix it, even though you broke it! LOL, I’m just messing with you. I do appreciate you trying to help. I’m not sure why the icons still aren’t working properly. My code was copied directly from the documentation and other support tickets and didn’t work. Your code was slightly different and it still doesn’t work.
Maybe a different set of eyes can see something we’re missing?
As for the child theme, I attempted to use one years ago and had a very poor experience with it. I’ve used ones that others have set up when they needed my help and I’ve just never been a fan. They sound good on paper, but in my experience, can often be a giant pain. That was years ago, maybe things changed but I’m not really interested in a child theme. I appreciate the suggestion though.
I simply keep a backup copy of everything that’s changed. I have a backup of the code used, as well as a backup of whatever file was edited. Same with any quick/custom CSS. It’s not a one-click solution, but it works. For example, when you got the fatal error and brought down the site, it took me longer to log in than it did to actually SFTP in and drop in the fix.
Again, thank you for helping. I hope we can find a solution.
August 11, 2022 at 9:19 am #1361430Hi Sozo,
Yes, I did broke it, I guess I’m being too dependent on the Theme File Editor’s ability to rollback if an error occurs (next time I’ll ask FTP access to be sure lol).
Anyways, I’m glad you’re still awake :DI test the code on my end without a child theme and added it above this code:
require_once( 'functions-enfold.php' );
and it does not work, and it does not work if you put it below.
However, it did work if you add it below this code (line 41-44):if( isset( $avia_config['use_child_theme_functions_only'] ) ) { return; }
Please try to add it here or you can give child theme another chance :D
Best regards,
NikkoAugust 11, 2022 at 9:35 am #1361436It works!! Thanks Nikko, I really appreciate that. It looks good, I just need to tighten up the spacing a little bit, but I’ll work on that later, it’s late.
Thanks again!
August 11, 2022 at 9:41 am #1361438Hi Sozo,
You’re welcome and I’m happy to hear that :)
Thanks for using Enfold and have a good night rest.Best regards,
NikkoSeptember 23, 2022 at 1:48 pm #1366120It not works, the icon shows a pen..
September 23, 2022 at 1:51 pm #1366121Hope this feature will be added in the next update. Includes shipping icons.
September 23, 2022 at 6:25 pm #1366172Hi,
@paudimodel, please note that these icons are not default in the theme, you will need to add your own custom Fontello icons to your theme, please follow our documentation to add your own custom fonts: Adding your own Fontello
The code that Sozo posted will help you add many at the same time, but you will need to modify it for the icon font that you download.
If after you install your custom icon fonts to your site and follow the documentation find that you need further help, please create a new thread and include a recap, and WordPress admin access in the Private Content area so we can assist. Since this is not your thread posting your login here will not be private and is not recommended, and you will not see anything we write in the Private Content area.Best regards,
Mike -
AuthorPosts
- You must be logged in to reply to this topic.