Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Changing the login/Account text to a svg icon


inunzi

Question

18 answers to this question

Recommended Posts

  • 0

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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...