How can I make my social media icons only show icons in the footer without text? My theme is Vision

[LeeYee]

I want to make the text next to the social media icons in the footer disappear and display them side by side horizontally. How can I do this? My theme is vision

[Moeed · Accepted solution]

Hey @LeeYee 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
ul.social-links.social-links--has-label span {
    display: none !important;
}
.social-links {
    display: flex !important;
    gap: 1.5rem !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[saim007]

@LeeYee Without store URL how we can see the site and check the problem?

[LeeYee]

https://feihuebike.com/ 

[Moeed · Accepted solution]

Hey @LeeYee 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
ul.social-links.social-links--has-label span {
    display: none !important;
}
.social-links {
    display: flex !important;
    gap: 1.5rem !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[LeeYee]

thanks！it works!

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

[niraj_patel]

Hello @LeeYee 
would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

[LeeYee]

https://feihuebike.com/ 

[niraj_patel · Accepted solution]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .footer ul.social-links.social-links--has-label li a span {
      display: none !important;
  }
  .footer ul.social-links.social-links--has-label {
     display: flex !important;
       gap: 18px !important;
  }
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Rahul_dhiman]

Hello @LeeYee 
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> footer.css
add this code at the end of the file.

.social-links span {
display: none !important;
}
.social-links {
display: flex !important;
gap: 1.5rem !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks