Jump to content

Using Font Awesome Icons in V7.1 Navigation

Recommended Posts

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 comment
  • Replies 12
  • Views 3.6k
  • Created
  • Last Reply
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 comment
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

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

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

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
  • 4 weeks later...
  • 3 months later...

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 comment

Archived

This topic is now archived and is closed to further replies.

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