Jump to content

FontAwesome / icons on Personal plan

Recommended Posts

  • Replies 14
  • Views 2.1k
  • Created
  • Last Reply

Top Posters In This Topic

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.

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

 1980619687_ScreenShot2020-01-13at11_08_46AM.png.2706ccfa23014292a90188923490013f.png

Edited by cpotisch
Link to comment
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

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, 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>
Edited by tuanphan

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

Link to comment
  • 3 months later...

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?

Link to comment
  • 2 months later...
  • 1 year later...
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;
}

 

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

Create an account or sign in to comment

You need to be a member in order to leave a comment


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