Using Font Awesome Icons in V7.1 Navigation

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

Can anyone help with this issue, please?

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.

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

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

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

10 minutes ago, tuanphan said:

I read your message, but....

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

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

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

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

19 minutes ago, tuanphan said:

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

Many thanks

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

I found a good guide for version 7.1 here

https://bamn.digital/blog/add-custom-icons-to-squarespace-navigation

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*/