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

Using Font Awesome Icons in V7.1 Navigation


timoneill

Question

Site URL: https://lanternfish-salamander-gp6n.squarespace.com/

Can anyone help with this issue, please?

Something that works perfectly on V7.0 sites is using https://fontawesome.com/ icons within the navigation menu:
 
V7.0
image.png
Result:
image.png
 
It doesn't seem to be working on V7.1:
image.png
Result:
image.png
 
This is the method I've used that works perfectly on 7.0 but not on 7.1:
 
1. Head over to https://fontawesome.com/start and copy the CDN (the big link in the dark box)

2. Go back to Squarespace and go to Settings - Advanced - Code Injection.

3. Paste Font Awesome CDN into the 'Header' section:

4. Hit save.
 
Then in order to use any icons, I search for the required icon on the Font Awesome site and copy the HTML for that icon (for example: <i class="fas fa-home"></i>), then either paste that into a code block on Squarespace for use within any section or paste that into either a page navigation title or into a link description within the main navigation menu.
 

Thanks, Tim

Link to post
  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

You can setup password & share url? The steps seem right. However, sometimes it can come from other causes. So if you can share site url, It will be better.

Posted Images

12 answers to this question

Recommended Posts

  • 0
38 minutes ago, tuanphan said:

You can setup password & share url?

The steps seem right. However, sometimes it can come from other causes.

So if you can share site url, It will be better.

Hi, the site url should have been at the top of my question but here it is anyway:

https://lanternfish-salamander-gp6n.squarespace.com/

I've messaged you the site password I just created.

Reply on here when you've had a look.

Thanks, Tim

Link to post
  • 0
32 minutes ago, timoneill said:

Hi, the site url should have been at the top of my question but here it is anyway:

https://lanternfish-salamander-gp6n.squarespace.com/

I've messaged you the site password I just created.

Reply on here when you've had a look.

Thanks, Tim

I read your message, but....

image.thumb.png.d75ec5556d5e028c61ba13fee5e8f89b.png

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

-- I'm seriously sick. Off some time.

Link to post
  • 0
31 minutes ago, timoneill said:

Hi, the site url should have been at the top of my question but here it is anyway:

https://lanternfish-salamander-gp6n.squarespace.com/

I've messaged you the site password I just created.

Reply on here when you've had a look.

Thanks, Tim

Hi,

Slight change, I've created a test 7.1 site using exactly the same code injection and custom CSS as the main site and the issue remains but I thought it'd be better for testing a resolution rather than on the main site:

https://gazelle-llama-glea.squarespace.com/

Password to access is: P@55AP5!

Thanks, Tim

 

Link to post
  • 0
10 minutes ago, tuanphan said:

I read your message, but....

image.thumb.png.d75ec5556d5e028c61ba13fee5e8f89b.png

Hi,

Slight change, I've created a test 7.1 site using exactly the same code injection and custom CSS as the main site and the issue remains but I thought it'd be better for testing a resolution rather than on the main site:

https://gazelle-llama-glea.squarespace.com/

Password to access is: P@55AP5!

Thanks, Tim

Link to post
  • 0
39 minutes ago, timoneill said:

Hi,

Slight change, I've created a test 7.1 site using exactly the same code injection and custom CSS as the main site and the issue remains but I thought it'd be better for testing a resolution rather than on the main site:

https://gazelle-llama-glea.squarespace.com/

Password to access is: P@55AP5!

Thanks, Tim

You did the right steps. However, SS 7.1 has caused this problem, it seems that HTML inserted in Navigation cannot work. If you edit a page, insert a code block, and paste the code <i class="fas fa-home"></i>

you'll see that it works.

Try using CSS :after :before instead

Edited by tuanphan

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

-- I'm seriously sick. Off some time.

Link to post
  • 0
10 minutes ago, tuanphan said:

You did the right steps. However, SS 7.1 has caused this problem, it seems that HTML inserted in Navigation cannot work. If you edit a page, insert a code block, and paste the code <i class="fas fa-home"></i>

you'll see that it works.

Try using CSS :after :before instead

Hi,

Yes, definitely seems to only affect 7.1 sites

Can you clarify what you meant by "Try using CSS :after :before instead" please.

Thanks very much

Link to post
  • 0
2 minutes ago, timoneill said:

Hi,

Yes, definitely seems to only affect 7.1 sites

Can you clarify what you meant by "Try using CSS :after :before instead" please.

Thanks very much

Here https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

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

-- I'm seriously sick. Off some time.

Link to post
  • 0
On 3/13/2020 at 12:49 PM, timoneill said:

Many thanks

Hi,

For the moment, I hadn't really had time to investigate using pseudo-elements but I might get back into that at a later date.  Thank you very much for that link though.

Regards,

Tim

Link to post
  • 0

Yep, you can do the same thing with your social links:
1. First enable your social links in your header.
2. Add a Link to the beginning of your Social Link List https://www.yourdomain.com/search
3. Add your Font Awesome Script to your Header Injection.
4. Add your css:

/*Custom Search Bar*/

.header-actions--right .header-actions-action--social .icon:first-child
{visibility:hidden}

.header-actions--right .header-actions-action--social .icon:first-child:after {
content: '\f002'; 
font-family: FontAwesome;
  position: absolute;
margin-left:-1vw;
  margin-top: 3px;
font-size: 15px;
color:lightgray;
visibility:visible}

.sqs-svg-icon--list a:first-child
{display:none}

/*END Custom Search Bar*/

 

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