FontAwesome / icons on Personal plan

I'm trying to add icons to my nav, but I can't use code injection since I have the Personal plan. Everything I've seen says to use FontAwesome, and that requires code injection. Any way to do this?

Thanks in advance.

If you use Personal Plan, you can import FontAwesome at Design > Custom CSS

With Business Plan, use this (Code Injection Header)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

With Personal Plan, use this (Design > Custom CSS)

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

It will work, I just tested on my site.

15 hours ago, tuanphan said:

If you use Personal Plan, you can import FontAwesome at Design > Custom CSS

With Business Plan, use this (Code Injection Header)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

 

With Personal Plan, use this (Design > Custom CSS)

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

It will work, I just tested on my site.

I added it to the CSS, but when I try to use an icon, it either just doesn't show up, or it displays a sort of "missing element" hollow square. Here's what I added to the page:

8 hours ago, cpotisch said:

I added it to the CSS, but when I try to use an icon, it either just doesn't show up, or it displays a sort of "missing element" hollow square. Here's what I added to the page:

 

my code is FontAwesome 4.7

your code =fas fa-history is FontAwesome 5.x

7 minutes ago, tuanphan said:

my code is FontAwesome 4.7

your code =fas fa-history is FontAwesome 5.x

So how can I deal with that? Also, is it not possible to choose the color with FontAwesome?

22 minutes ago, cpotisch said:

So how can I deal with that? Also, is it not possible to choose the color with FontAwesome?

https://fontawesome.com/v4.7.0/

you need to use CSS to change FA icon color.

55 minutes ago, tuanphan said:

https://fontawesome.com/v4.7.0/

you need to use CSS to change FA icon color.

I'm not seeing much on how it works with CSS; only HTML. Can you point to where it explains this? And is it only for v4.7?

10 minutes ago, cpotisch said:

I'm not seeing much on how it works with CSS; only HTML. Can you point to where it explains this? And is it only for v4.7?

an example

<i class="fa fa-male" aria-hidden="true" style="color:red;"></i>

13 hours ago, tuanphan said:

an example

<i class="fa fa-male" aria-hidden="true" style="color:red;"></i>

Sorry, I'm asking where it explains how to add FontAwesome (and preferably v5.x) to the site. I can't find any explanation that doesn't involve code injection. Thanks.

Hi @tuanphan, I was wondering if you could confirm if Custom CSS allows to use Font Awesome 5 on a Personal plan.

@import url('https://use.fontawesome.com/releases/v5.13.0/css/all.css');

Icons appear when the Custom CSS page is opened (so when I'm loggedin to Squarespace) but icons do not appear when viewing the site.
The same occurs when trying your code for Font Awesome 4.

What do you think?

I have the same question. If you have a personal plan and thus no access to code injection, is there another way use or add FontAwesome to your site? @tuanphan do you know? Thanks in advance.

@rwp Do you have an ideal? Thank you

The only thing I can think of, if @import doesnt work, is to copy and paste the entire css file into design -> css.

I'm using this too on my website: https://www.polaritycode.com/

My question: Is it possible to update the code so that the icons are left justified (not centered)?

On 2/24/2022 at 7:50 PM, snavlakha said:

I'm using this too on my website: https://www.polaritycode.com/

My question: Is it possible to update the code so that the icons are left justified (not centered)?

It looks like you solved this?

.t-social {
    display: flex !important;
}