Changing the login/Account text to a svg icon

Hello! You wanted me to make a forum to tag you in so I did. @tuanphan, is it possible to make the account text into a svg icon like the picture below? If so please help me if you can. Thanks!

We need a link to your page to help.

17 minutes ago, rwp said:

We need a link to your page to help.

It’s just the home page.

Still can't help without seeing your page.

13 hours ago, rwp said:

Still can't help without seeing your page.

@rwp Oh ok! Are you meaning a picture of my page? If so, I took some pics on what it looks like on mine and what o want it to look like.

No, we need the actual link to your page.

@rwpI’m not quite understanding sorry if I sound stupid.

@rwp Do you mean my Squarespace page or my actual site page? If you want the Actual site page then here’s the Home Page link.

Add to Home > design > Custom CSS

.header-actions .user-accounts-text-link {
    background-image: url(https://www.flaticon.com/svg/static/icons/svg/1828/1828503.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    color: transparent !important;
}

@tuanphan It looks perfect! But is there any way to make the icon show in the nav on mobile like the shopping bag does? If so that would be great!

Add to Home > design > Custom CSS

.header-actions .user-accounts-text-link, a.user-accounts-text-link.header-nav-item {
    background-image: url(https://www.flaticon.com/svg/static/icons/svg/61/61205.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    color: transparent !important
}

26 minutes ago, tuanphan said:

Add to Home > design > Custom CSS

.header-actions .user-accounts-text-link, a.user-accounts-text-link.header-nav-item {
    background-image: url(https://www.flaticon.com/svg/static/icons/svg/61/61205.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    color: transparent !important
}

 

I put on the code, and the text changed, but I want it to be in the nav bar as it is on desktop like the screenshot below. Is this possible? Thanks!

I have the same problem. I think there must be something wrong with the code, any chance you can see what it is?

On 4/15/2021 at 5:10 PM, Chrisprocreate said:

I have the same problem. I think there must be something wrong with the code, any chance you can see what it is?

Hi. Can you share link to your site? We can check again easier

@Chrisprocreate

Please post the site-wide password here.

We can then take a look at your issue.

Hi 

I would like to know how to add a SVG icon on a CSS code.

I want to add this one : https://www.flaticon.com/free-icon/user_633779?related_id=633779

Thank you so much for your help

I have posted all the code that is in the CSS above, I would rather not give you the password as it's a clients website, not mine.

Please can someone help do this to my website too?

Would be so grateful!

soulfruit.co.uk

On 4/22/2021 at 12:33 AM, ElizabethM said:

Hi 

I would like to know how to add a SVG icon on a CSS code.

I want to add this one : https://www.flaticon.com/free-icon/user_633779?related_id=633779

Thank you so much for your help

On 5/13/2021 at 3:18 PM, nw7063 said:

Please can someone help do this to my website too?

Would be so grateful!

soulfruit.co.uk

On 4/22/2021 at 3:10 PM, Chrisprocreate said:

I have posted all the code that is in the CSS above, I would rather not give you the password as it's a clients website, not mine.

Add to Design > Custom CSS

/* Login text to icon */
.user-accounts-text-link span {
    color: transparent;
}

.user-accounts-text-link {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMGMtNi42MjcgMC0xMiA1LjM3My0xMiAxMnM1LjM3MyAxMiAxMiAxMiAxMi01LjM3MyAxMi0xMi01LjM3My0xMi0xMi0xMnptNy43NTMgMTguMzA1Yy0uMjYxLS41ODYtLjc4OS0uOTkxLTEuODcxLTEuMjQxLTIuMjkzLS41MjktNC40MjgtLjk5My0zLjM5My0yLjk0NSAzLjE0NS01Ljk0Mi44MzMtOS4xMTktMi40ODktOS4xMTktMy4zODggMC01LjY0NCAzLjI5OS0yLjQ4OSA5LjExOSAxLjA2NiAxLjk2NC0xLjE0OCAyLjQyNy0zLjM5MyAyLjk0NS0xLjA4NC4yNS0xLjYwOC42NTgtMS44NjcgMS4yNDYtMS40MDUtMS43MjMtMi4yNTEtMy45MTktMi4yNTEtNi4zMSAwLTUuNTE0IDQuNDg2LTEwIDEwLTEwczEwIDQuNDg2IDEwIDEwYzAgMi4zODktLjg0NSA0LjU4My0yLjI0NyA2LjMwNXoiLz48L3N2Zz4=);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    filter: invert(1);
}

Hi,

I would like to do the same with my website, replace "sign in" with an icon such as this one: https://www.flaticon.com/free-icon/user_633779?related_id=633779

I have tried the custom css provided above but this is not working.

Here is my website URL : https://www.olive-groves.com/sghome (Marta, 7.0)

Any help would be much appreciated!

On 11/22/2021 at 4:53 AM, CamilleOG said:

Hi,

I would like to do the same with my website, replace "sign in" with an icon such as this one: https://www.flaticon.com/free-icon/user_633779?related_id=633779

I have tried the custom css provided above but this is not working.

Here is my website URL : https://www.olive-groves.com/sghome (Marta, 7.0)

Any help would be much appreciated!

 

Add this to Design > Custom CSS

/* Login text to icon */
.user-accounts-text-link span {
    color: transparent;
}
.user-accounts-text-link {
    background-image: url(https://cdn.pixabay.com/photo/2020/12/30/14/23/waterfall-5873630__340.jpg) !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
}

@tuanphan many thanks for your help!

Hi there, I used this code to replace the "Login" text with the Customer icon. However, the icon looks huge and out of place on the mobile menu. I would like it to be just the "Login" text on the Mobile menu. How can I accomplish this?

Thanks!

On 12/4/2021 at 1:46 AM, Brie said:

Hi there, I used this code to replace the "Login" text with the Customer icon. However, the icon looks huge and out of place on the mobile menu. I would like it to be just the "Login" text on the Mobile menu. How can I accomplish this?

Thanks!

Can you share link to your site? We can check easier

https://www.soulfruit.co.uk/blog