Jump to content

Changing the login/Account text to a svg icon

Recommended Posts

On 3/3/2024 at 5:00 AM, threadsonline said:

Hi @tuanphan,

I have been playing around with this code trying to replace the word 'login' with the attached icon. I paid for the premium account on Flaticon to download the icon as a SVG but I still can't get this to work. 

Maybe iIm not using the correct URL for the icon, I downloaded it as s SVG off Flaticon then right clicked > inspect and the copied the attached URL.

Please help!! 😞 Store: https://threadsonline.co.uk/ Password: asdfghjkl

I tried this code:

a.user-accounts-text-link {
    background-image: url(http://www.w3.org/2000/svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    color: transparent !important;
    height: 28px;
}

Screenshot 2024-03-02 215700.png

user (2).png

You can use this code

a.user-accounts-text-link {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2024_03/Icon.png.379862e98b4db2b6a5209be2e722675a.png) !important;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    color: Transparent !important;
    height: 28px
}

image.png.b4a15ea3d0b2d90e68b74aa38d91108e.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 hours ago, tuanphan said:

You can use this code

a.user-accounts-text-link {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2024_03/Icon.png.379862e98b4db2b6a5209be2e722675a.png) !important;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    color: Transparent !important;
    height: 28px
}

image.png.b4a15ea3d0b2d90e68b74aa38d91108e.png

Thanks! For future reference in case I want to change the icon, how do I get the image link?

Link to comment
2 hours ago, tuanphan said:

You can use this code

a.user-accounts-text-link {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2024_03/Icon.png.379862e98b4db2b6a5209be2e722675a.png) !important;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    color: Transparent !important;
    height: 28px
}

image.png.b4a15ea3d0b2d90e68b74aa38d91108e.png

Could you advise how to get it to display on mobile also? Thanks 🙂 

Link to comment
2 hours ago, tuanphan said:

You can use this code

a.user-accounts-text-link {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2024_03/Icon.png.379862e98b4db2b6a5209be2e722675a.png) !important;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    color: Transparent !important;
    height: 28px
}

image.png.b4a15ea3d0b2d90e68b74aa38d91108e.png

Sorry to be a pain - 3 messages in a row! But the 'underline on hover' feature is striking through the login icon, how can I remove this please?

Link to comment

asdfghjkl

https://threadsonline.co.uk/

On 3/13/2024 at 8:23 PM, threadsonline said:

Thanks! For future reference in case I want to change the icon, how do I get the image link?

You can post on forum then right click on Image > Copy Image Address

Or you can upload to your site > create a blank page > add a Gallery > upload image > Save > then right click on gallery image > copy image address

On 3/13/2024 at 8:28 PM, threadsonline said:

Sorry to be a pain - 3 messages in a row! But the 'underline on hover' feature is striking through the login icon, how can I remove this please?

Use this CSS code

a.user-accounts-text-link {
    border: none !important;
    text-decoration: none !important;
}

 

On 3/13/2024 at 8:26 PM, threadsonline said:

Could you advise how to get it to display on mobile also? Thanks 🙂 

Use this CSS code

div.header-menu a.user-accounts-text-link {
    background-position: center !important;
}

image.png.baf511f20fe943d7a4123c85af5c8930.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 hours ago, tuanphan said:

asdfghjkl

https://threadsonline.co.uk/

You can post on forum then right click on Image > Copy Image Address

Or you can upload to your site > create a blank page > add a Gallery > upload image > Save > then right click on gallery image > copy image address

Use this CSS code

a.user-accounts-text-link {
    border: none !important;
    text-decoration: none !important;
}

 

Use this CSS code

div.header-menu a.user-accounts-text-link {
    background-position: center !important;
}

image.png.baf511f20fe943d7a4123c85af5c8930.png

Thanks so much for your help on this 🙂 Is there anyway the login icon can go next to the cart in the header on mobile view?

Link to comment
On 3/15/2024 at 6:17 PM, threadsonline said:

Thanks so much for your help on this 🙂 Is there anyway the login icon can go next to the cart in the header on mobile view?

Use this CSS code

/* Show user next to cart on mobile */
@media screen and (max-width:991px) {
.header .customerAccountLoginDesktop {
    display: flex !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
5 hours ago, tuanphan said:

Use this CSS code

/* Show user next to cart on mobile */
@media screen and (max-width:991px) {
.header .customerAccountLoginDesktop {
    display: flex !important;
}
}

 

Thanks this worked! but the icon is still showing up in the menu as well, can this be removed?

Link to comment
On 3/18/2024 at 4:20 PM, tuanphan said:

Use this CSS code

/* Show user next to cart on mobile */
@media screen and (max-width:991px) {
.header .customerAccountLoginDesktop {
    display: flex !important;
}
}

 

Remove this and use this new CSS

/* Show user next to cart on mobile */
@media screen and (max-width:991px) {
.header .customerAccountLoginDesktop {
    display: flex !important;
}
div.header-menu .user-accounts-link {
    display: none !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

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.