Adding Icons to a Squarespace Website
In this guide, we will cover how to add icons quickly and easily to your Squarespace website using a popular (and free!) tool called Font Awesome.
Example
Let's say you have a webpage describing the features of your new product. To call out the top three features and, rather than having a small image, you would like to have a symbol or an icon that represents this feature, like this:
It's available
anywhere!
It's available
anytime!
And it's
really quick!
Obviously, this could be achieved using images for each of the three icons, but you will have to spend time drawing them, optimising them, and adding them to your assets.
Let's try Font Awesome instead!
Step 1 of 3. Sign up to Font Awesome
Go to the Font Awesome Getting Started page, enter your email and click Send my Font Awesome embed code
You will receive an email with a small snippet of code, which looks something like this...
<script src="https://use.fontawesome.com/abc1234567.js"></script>
Copy this code into your clipboard or flag the email; you're going to need this code in a minute.
Step 2 of 3. Add Font Awesome to Squarespace
At this point, you have two options: (1) Make Font Awesome available on all your web pages; or (2) make it available on a per-page basis. You need to think carefully about this, as adding Font Awesome will add a small amount of load time to your webpages. Only add Font Awesome to pages where it is actually required.
To add Font Awesome to all pages:
Log in to your Squarespace site
Go to Settings > Advanced > Code Injection
In the section labelled HEADER, paste the snippet of code from your email in Step 1
Font Awesome will now be available on all pages of your Squarespace website.
To add Font Awesome to a single page:
Log in to your Squarespace site
Go to Pages, hover over the page you want to add Font Awesome to, and click the gear/cog icon
Under the Advanced tab, in the section labelled PAGE HEADER CODE INJECTION, paste the snippet of coed from your email in Step 1
Font Awesome will now be available on this page only. To add it more pages, simply repeat the steps above.
Step 3 of 3. Add Font Awesome to the page
Now that Font Awesome is available to us in Squarespace, we can use it on the page. So let's say we want to add the rocket you can see in the example at the top of this page:
Go to one of your pages and click Edit to edit the content
Add a new Code Block by clicking on one of the black bubbles and selecting Code from the menu
In the pop-up that follows, add the following code:
<span class="fa fa-rocket"></span>
- When you click Apply you should see the rocket on the page like this !
Adding any icon from Font Awesome is as simple as this, and the code follows the same pattern for every icon. You add a <span></span>, then give it a class of fa fa-[name_of_icon]. Some more examples:
<span class="fa fa-globe"></span>
<span class="fa fa-envelope"></span>
<span class="fa fa-users"></span>
You can find a full, searchable list of icons on the Font Awesome Icons page, including their individual titles for use in the code.
More Options
Customising Font Awesome Icons
As Font Awesome is added as inline text, and not an image, customising the look of each icon is very straightforward. For example, let's say you wanted to make all the icons red:
Go to Design > Custom CSS
In the text area, add the following code:
.fa { color: red }
- This selects all the icons (via the class .fa and makes them red, like this !
- Obviously, you can change the size and position via CSS too.
Animated Font Awesome Icons
Font Awesome icons can also be animated using built-in classes. For example:
<span class="fa fa-spinner fa-spin"></span>
There are many more examples on the Font Awesome Examples page.
I hope you find this Squarespace Guide helpful. If you're having any problems, I would be happy to help. You can leave a comment below, send me a message on Twitter or use the contact form here.