A user wanted to replace the default share button icon on a Dawn theme product page but encountered an unwanted underline extending into the space between the custom icon and “Share” text.
Initial Problem:
in share.liquid created the desired spacing but caused the underline to extend across those spacesSolution Provided:
Instead of using HTML spaces, the fix involved:
theme.liquid before the </head> tagmargin-right) rather than text spacing.share-button__button .icon-share stylingOutcome:
I already know how to change the icon for the share button on the product page, but there’s an issue… I space issue between the icon and share text. I can get a space between the icon and the text, but the underline starts right at the icon. I want “Icon space Share” See images below.
Green arrow shows unwanted underline:
This default dawn theme share button:
So how can I change to my icon and have the proper space/text between them?
Thanks
Hi Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.
Hi @xnyjyh
Step 1. Go to Admin → Online store → Theme > Edit code
Step 2. Find the file base.css. Search for the following CSS snippet
.share-button__button .icon-share {
margin-right: 0.2rem !important;
}
If it helps you, please like and mark it as the solution.
Best Regards
Sorry, you might misunderstood the my question… I can change the spacing. its the underline after changing to my icon… please check my website again and put a space with my icons that’s now active. you’ll see the underline continuing after the icon. id like that space underline gone
when my icon is there, theres that underline when I use in share.liquid
You are increasing the space between the icon and the ‘Share’ text by adding spaces at the beginning of the text. However, this method is not ideal and, as you can see, it adds an underline to the spaces as well. Instead, to adjust the spacing between the icon and the text, you should use my approach: adjust the margin for the icon. Do you understand?
Step 1. Go to Admin → Online store → Theme > Edit code
Step 2. Find the file theme.liquid. Add the following snippet before the tag.
Boo, i cant seem to get it 
Hi @xnyjyh
Step 1. Go to Admin → Online store → Theme > Edit code
Step 2. Find the file theme.liquid. Add the following snippet before the tag.
The result
If it helps you, please like and mark it as the solution.
Best Regards
Thank you! lol. Finally it works 
