Jump to content

Can I use Font Awesome?

Recommended Posts

  • 1 year later...
  • 3 months later...
  • 3 months later...

This post has gotten so many views but so far no comprehensive reply regarding the integration of font-awesome into a Squarespace website. Does anyone know how to do this and can explain it step by step? Or do you know of an article on the web somewhere that does this in relation to Squarespace? My own research has not come up with much unfortunately.

Any pointers would be much appreciated! Thank you.

513339360_KerstinMartinLogoSpiceNoPadding.png.941d8d4fedd0ad3fa14353bf6e86de6b.png
 

 

281513023_DesignerChecklistMockup.thumb.png.f279d0ad49726a20fb099c1559c8f99a.pngHello, I'm Kerstin! Circle Leader and Squarespace user since 2008. I specialise in teaching all things Squarespace and help web designers build calm and profitable businesses with Squarespace.

→ Check out my FREE Designer Checklist to get started.

Link to comment

Yes, I found out how to use it.

  1. Settings > Advanced > Code Injection
  2. Paste this code on the Code Injection page under HEADER:
    
    
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">`

Now you have installed Font Awesome on your site. You can now insert code (using a Code Block) on any of your pages to reference and use any of their icons (http://fortawesome.github.io/Font-Awesome/icons/)

Example of individual code to insert in a Code Block for an icon:

<i class="fa fa-envelope-o"></i>

fa-envelope-o

Hope this helps!

Edited by cstine
Link to comment

Just to throw something into the mix, I noticed the other day on the CSS window that the custom files says "Files and Fonts." Can you upload a .ttf file to make the font available on you site this way?

Link to comment

@cstine – I’ve formatted the code in your answer – the HTML was getting mangled by this site. To format code, just highlight the lines of code and use the 5th button in the toolbar:

Use the source

The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Link to comment
  • 1 year later...

Note that in @cstine's answer above, there's a stray back-tick (aka grave accent mark) at the end of the line of code. If you paste that character into the Code Injection box it can cause problems. Here's the code without that character for easy copy-pasta:


<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

I've also found that you can change the 4.2.0 numbers to a newer version of Font Awesome to access the new icons. E.G.:


<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">

or


<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">



Link to comment
  • 3 months later...
  • 4 weeks later...
  • 8 months later...
  • 1 year later...
  • 6 months later...
  • 1 year later...
  • 4 months later...
On 4/29/2022 at 2:07 PM, Abdul_Salphan said:

Hi. I have added font awesome icons to the side and the icons appear on the site when in edit mode. But, the icons are not visible on the live site. 

Is this a common bug for all or am I doing something wrong?

What is your site url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
On 5/1/2022 at 3:41 AM, tuanphan said:

What is your site url? We can check easier

@tuanphan — having the same issue. Site is jessepacker.com — the two icons should be visible as shown here (in edit mode) but when out of edit mode, don't show up.

To be clear this is using CSS, not JS which ought to work, based on what I've read here and elsewhere.

Screen Shot 2022-07-06 at 2.15.34 PM.png

Screen Shot 2022-07-06 at 2.16.29 PM.png

Link to comment
8 hours ago, jessepacker said:

@tuanphan — having the same issue. Site is jessepacker.com — the two icons should be visible as shown here (in edit mode) but when out of edit mode, don't show up.

To be clear this is using CSS, not JS which ought to work, based on what I've read here and elsewhere.

Screen Shot 2022-07-06 at 2.15.34 PM.png

Screen Shot 2022-07-06 at 2.16.29 PM.png

Try remove @import code, add this to Code Injection > Header

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  

If the site is Personal plan, edit Site Footer > Add a Code Block > Paste this line

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  

If it still doesn't work, keep the code & let me know. I will check it again

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 7/6/2022 at 11:13 PM, tuanphan said:

Try remove @import code, add this to Code Injection > Header

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  

If the site is Personal plan, edit Site Footer > Add a Code Block > Paste this line

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  

If it still doesn't work, keep the code & let me know. I will check it again

The footer code block fix worked like a charm. Thanks, @tuanphan! Appreciate it.

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.