Social Icons Changed Appearance

[guybower1]

hi

I have some code which is used in a widget for social icons. I know you have a much easier way to do it, but this was code that was supplied by one of your colleagues quite some time back and actually hadn’t noticed the look had changed. Nothing has been done on the live site for quite some time, with tourism being at a standstill.

This was the code supplied, though I added the margin etc

<hr class="x-gap cs-hide-md cs-hide-sm cs-hide-xs" style="margin: 97px 0 0 0;">
<a href="https://www.facebook.com/feastthailand/" class="the-social-links tsl-rounded tsl-32 tsl-default tsl-facebook" target="_blank" alt="Facebook" title="Facebook"><i class="fa fa-facebook"></i></a>&nbsp;
<a href="https://www.instagram.com/feastthailand/" class="the-social-links tsl-rounded tsl-32 tsl-default tsl-instagram" target="_blank" alt="Instagram" title="Instagram"><i class="fa fa-instagram"></i></a>&nbsp;
<a href="https://www.pinterest.com/feastthailand/" class="the-social-links tsl-rounded tsl-32 tsl-default tsl-pinterest" target="_blank" alt="Pinterest" title="Pinterest"><i class="fa fa-pinterest"></i></a>&nbsp;
<a href="https://twitter.com/feastthailand/" class="the-social-links tsl-rounded tsl-32 tsl-default tsl-twitter" target="_blank" alt="Twitter" title="Twitter"><i class="fa fa-twitter"></i></a>&nbsp;
<a href="https://plus.google.com/+Feastthailand/" class="the-social-links tsl-rounded tsl-32 tsl-default tsl-google-plus" target="_blank" alt="Google+" title="Google+"><i class="fa fa-google-plus"></i></a>&nbsp;
<a href="https://www.youtube.com/feastthailand/" class="the-social-links tsl-rounded tsl-32 tsl-default tsl-youtube" target="_blank" alt="YouTube" title="YouTube"><i class="fa fa-youtube"></i></a>&nbsp;
<a href="https://www.tripadvisor.com/Attraction_Review-g297922-d11435098-Reviews-Feast_Thailand_Food_Tours-Hua_Hin_Prachuap_Khiri_Khan_Province.html" class="the-social-links tsl-rounded tsl-32 tsl-default tsl-tripadviser" target="_blank" alt="TripAdvisor" title="TripAdvisor"><i class="fa fa-tripadvisor" aria-hidden="true"></i></a>

Is the issue fixable within the code, or am I better off scrapping how it was done and replacing it with true buttons?

cheers

[ruenel]

Hello @guybower1,

Thanks for writing in! Even if we fixed the current issue, sooner or later it will just comeback after updates. We highly recommend that you go to X > Global Blocks and create a global block. In your blog, you can simply insert the necessary icons and style them. Once you are done, save your changes and take note of the global block shortcode. The global block shortcode can replace the current HTML social icon codes. In relation to the old HTML code, you may need to remove the CSS code for the social icons to minimize the clatter with CSS codes.

Hope this makes sense.

[guybower1]

hi Ruenel
Thanks so much for the reply
A shame it required updating at all, as it was only supplied in the past 18 months, but if it must go, then so be it.
Have now replaced it with a global block
cheers

[tristup]

Hi @guybower1,

Glad we are able to help you with this.

Thanks