-
AuthorPosts
-
June 22, 2018 at 12:01 am #976058
I already have thee social media icons on the right side in the small bar above the logo area.
I’d like to add another Facebook LIKE button just to the left of those icons.
Any ideas how I can do this?June 22, 2018 at 5:20 am #976088Hey Moondreamer21,
Try adding another social icon called “thumbs-up” from fontello.com
You can then create any link for it.
Here’s how to add custom social iconsBest regards,
MikeJune 28, 2018 at 2:21 pm #978895Thanks Mike. Below the
if(isset($avia_config[‘use_child_theme_functions_only’])) return;
line in functions.php, I added this code:// 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);Under Enfold – Import/Export I saw the option there to upload Fontello Font Zip. I clicked on the link there to Fontello, and selected a thumbs up Font Awesome icon. I downloaded it, but it wasn’t actually in a .ZIP file… so I couldn’t upload it.
So now I’m stuck – am I taking the right steps? What should I do next?
June 29, 2018 at 3:27 am #979170Hi,
Thanks for the login, I took a look at the code in your functions.php and see that your code may will need adjusting because you are using “icon_name” and “Icon Label” to name your custom icon. What would you like to call it when you are selecting it in the builder. “thumbs-up”?
As for downloading it, after selecting it did you click the big red button in the top-right side?
This gives me a zip file, if this doesn’t work for you I will be happy to get it for you, which thumbs-up did you want?
Once you have the zip file you will want to ensure that your functions.php icon name is the same as the css file in the zip file, I can also check this for you.Best regards,
MikeJuly 2, 2018 at 7:47 pm #980246Hi Mike,
I tried re-downloading the ‘thumbs-up’ icon and it worked as a .ZIP file this time. I uploaded it, then changed the ‘icon_name’ to ‘thumbs_up’ in functions.php, but now I’m stuck again.Should I be seeing the icon in the small top bar? Or is there something else I must change in the functions.php? I’d like for that thumbs up icon to, when clicked, allow people to LIKE my Facebook page (with that single click).
Thanks for all the great help!
July 3, 2018 at 2:00 am #980344Hi,
I corrected the code in your functions.php, so you can add the “thumbs-up” next to your social icons at:
Enfold Theme Options > Social Profiles > Your social profiles
But I thought that we could add a link to the icon to create the “Like” feature, but as I search I don’t see that the “Like” can be a url, it seems that it must be a script.
So, I added the script for you and placed it next to the other social icons, unfortunately it must be the blue FB button. I hope this is ok.
This is how I added it:
I added the FB script to a custom html widget in your “header” widget area:<div class="fb-like" data-href="http://www.facebook.com/your-fb-page" data-layout="button" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div>
then I moved it next to your social icons with this function in your functions.php:
function custom_script(){ ?> <script> jQuery(window).load(function(){ jQuery( "#custom_html-4" ).appendTo( ".social_bookmarks" ); }); </script> <?php } add_action('wp_footer', 'custom_script');
and made some minor adjustments with this css in your Quick CSS:
#custom_html-4.widget { width: 50px !important; padding: 15px 0 !important; display: inline-block !important; }
Best regards,
MikeJuly 3, 2018 at 4:03 am #980368Wow, this is fantastic, thank you! Is there a way to put it on the left side of the other icons? It’s perfect! :)
July 3, 2018 at 12:51 pm #980529Hi,
Ok, I added “float: left;” to the icon, Please clear your browser cache and check.Best regards,
MikeJuly 3, 2018 at 8:03 pm #980728That looks good, Mike – thanks!
I did a little tweaking to the position and have it just right.Although in the process of all these adjustments, it seems the font size of my social icons is now the same on mobile and desktop. The size is supposed to be 26px on desktop?
Would you mind taking a look at that, please?
Also, should I remove the text we added to functions.php for the original plan with fontello?
I want to keep code tidy if I can.
Thanks again!July 3, 2018 at 10:51 pm #980795UPDATE: I think I have the spacing all figured out. I’d like to leave this open for a day or two just to be sure though, really appreciate the help!
Would it be possible/a good idea for you to remove the fontello code in functions.php?
Really want to keep my code as clean as possible as I dive into this big web-site re-do.
THANKS AGAIN! :)July 4, 2018 at 1:01 am #980832 -
AuthorPosts
- You must be logged in to reply to this topic.