How to add Social Icons to Employees

I have added URL’s to Facebook, Twitter, and Google to Employee Info fields but no social icons are being displayed. Is there something else I need to do to get the social icons to work for Employees?
Thank you

Hello there,

There is no any other special setup to display the social icons once you’re properly entered the profile URLs. There might be server issue on your site which prevents the Font Awesome icons to be rendered by the web browser. I’d encourage you to read this solution. If it doesn’t resolve the problem, please share the link to your site to help me inspect the source of the problem, so that I can suggest you the solution in better way.

Regards,
Kharis

Hi Kharis,

The URL is http://www.thatphdguy.com.au/scratch/about/

I have added just a facebook link for the lady in the middle. No one else has the url implemented.

Would appreciate you taking a look, thank you.

Oh, and BTW, the Awesome icons seem to work ok on the Service pages.

Hello there,

Visiting the page you shared, the social icons you added are displaying properly as our demo. Please hover on each employee’s photo.

Regards,
Kharis

Thanks.

I was expecting something like this
Social Icons Sydney Demo

That sounded a bit short, sorry about that. What I should have said was…/

“Thanks for checking, yes I see what you mean. I guess I’ve misinterpreted the functionality. I was looking for something like the image I posted.”

Been a long week :slight_smile:

Thanks again Kharis!

Hello there,

Please try to do the following steps to clone the existing social icons and then put it after the email address.

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(function($) {

  if( $('.sydney_employees_widget').length ) {

    $('.sydney_employees_widget .roll-team').each(function(){

      var socials = $(this).find('.team-social').html();
      
      $(this).find('.team-content').append('<ul class="team-social">'+socials+'</ul>');
    
    });
    
  }

})(jQuery);

  1. Update

Then, you should apply the following custom CSS code into your site’s additional CSS option (Appearance > Customize > Additional CSS) to adjust its color.


.roll-team .team-content .team-social li a {
  border-color: #d65050;
  color: #d65050;
}

.roll-team .team-content .team-social li a:hover {
  background-color: #d65050;
  color: #fff;
}  

Regards,
Kharis

Wow!

Thank you.

You’re welcome and best wishes!