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

Using Font Awesome Icons in V7.1 Navigation

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

Share this post


Link to post

11 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

Share this post


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 faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


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

 

Share this post


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

Share this post


Link to post
  • 0
Posted (edited)
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 faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


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

Share this post


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 faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


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

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