Dawn Theme - Change default Icon for Share button Product page

[xnyjyh]

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

[BSSCommerce-B2B]

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.

[BSSCommerce-B2B]

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

[xnyjyh]

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

[BSSCommerce-B2B]

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?

[xnyjyh]

when my icon is there, theres that underline when I use   in share.liquid

[BSSCommerce-B2B]

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid. Add the following snippet before the </head> tag.

<style>
.share-button__button {
    white-space: nowrap !important;
    overflow: hidden !important;
}
</style>

[xnyjyh]

Boo, i cant seem to get it 😞

[BSSCommerce-B2B · Accepted solution]

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 </head> tag.

<style>
.share-button__button {
    white-space: nowrap !important;
    overflow: hidden !important;
}
.share-button__button svg {
    margin-right: 10px;
}
</style>

The result

If it helps you, please like and mark it as the solution.

Best Regards

[xnyjyh]

Thank you! lol. Finally it works 🙂

[Tvisa]

How to change share icon ?

to this