Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Can I use Font Awesome?


Guest

Question

14 answers to this question

Recommended Posts

  • 7

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
  • 1

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.

Link to comment
  • 0

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
  • 0

@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
  • 0

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

Create an account or sign in to comment

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

×
×
  • Create New...