Jump to content

Changing the login/Account text to a svg icon

Recommended Posts

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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!DF34EC6F-6092-469E-B042-1C19DC1B2FBC.thumb.jpeg.af4e9a956611efe8f9a4c5e5257a18d2.jpeg

Link to comment
  • 6 months later...
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?

629544161_Screenshot2021-04-15at11_07_54.png.ccc73a18f7ac49708197e486f9a0872b.png106259089_Screenshot2021-04-15at11_08_07.png.5018626f5e0a7f694d4419a58fa9b995.png2140148209_Screenshot2021-04-15at11_08_19.png.7d4373d50c60ea732e3e922a841203b4.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
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);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 6 months later...
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;
}

image.thumb.png.a5319d328f8bc50457667424ef06fd34.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

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!

Edited by Brie
Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.