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

Changing the login/Account text to a svg icon

Question

Hello! You wanted me to make a forum to tag you in so I did. @tuanphan, is it possible to make the account text into a svg icon like the picture below? If so please help me if you can. Thanks!34EC8FC0-FAA6-4537-87F8-A2E2F510079D.thumb.png.b0cf094831545c67dd2a709af983a516.png

Share this post


Link to post

11 answers to this question

Recommended Posts

  • 0

We need a link to your page to help.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

Still can't help without seeing your page.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


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

Share this post


Link to post
  • 0

No, we need the actual link to your page.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


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

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

Share this post


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