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

  • Answers 18
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular 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: c

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/sv

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.

Posted Images

18 answers to this question

Recommended Posts

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

874D80AE-26D3-42C9-9785-C83B0D81182E.jpeg

6EAC6442-F7D3-4304-AB8D-BD034FB921E2.png

Edited by inunzi
Link to post
  • 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;
}

 

Link to post
  • 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
}

 

Link to post
  • 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 post
  • 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

Link to post
  • 0

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

Link to post
  • 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);
}

 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...