Icon & tet in login button

Hello ! I saw on the forum the possibility to replace login account text by icon ! But me i want my icon and the following text : login account.

Is it possible ?

Can you share your website URL?

Try this in Custom CSS:

// add ACCOUNT text login
.user-accounts-link .user-accounts-text-link:before {
  content:'Account';
}

yes ! goalvest.squarespace.com 

password : goalvest

 

and i want this icon : https://fonts.google.com/icons?selected=Material+Symbols+Outlined:person:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=people&icon.size=24&icon.color=%23000000

I tried your code, it doesn't work for now

It doesn't look like you have the account login element added to the header.

oh yes sorry !! i just get the website access, they call it client login but its just a button.. still do you have code to put the icon in the button and before the button text ?

Completely different code needed, try this, replace the background: url with one you upload:

#siteWrapper .header-actions-action--cta .sqs-button-element--primary:before {
  content: '';
  height: 1em;
  width: 1em;
  display: inline-block;
  background: url('https://static1.squarespace.com/static/67409cde0e73d35f8fae4b7c/t/67459a664f278972cfe6b0f2/1732614758069/person_24dp_000000_FILL0_wght400_GRAD0_opsz24.png');
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 5px;
}

i'm sorry it doesn't work, even with your link

and i think this is my url ? google icon give me this : 

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=person" />

Do you have other code or maybe i'm doing it wrong ? But i puted this in CSS

42 minutes ago, Julien-Laumonerie said:

and i think this is my url ? google icon give me this : 

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=person" />

This isn't a URL, you'll need to download the icon, and upload it in Custom CSS, then replace the URL.

thanks it worked !

5 minutes ago, Julien-Laumonerie said:

thanks it worked !

Great! Can you mark my post as the solution and give it a like? Thanks!