How to Add Icons To Your Squarespace Website Using FontAwesome
Ever stumble on someone’s site and fall in love with their minimal icons that they use to add a little more excitement to their pages (without being overly distracting)?
If your website is on Squarespace, then you are in luck! There is a great, FREE website package that you can incorporate onto your site to get free icons to use on any page - and it’s call FontAwesome - https://fontawesome.com/
I have used this on multiple websites that I’ve built, and without fail I ALWAYS find an icon that works for whatever need I have.
Today, I’m getting pretty techie and diving in how to get these icons for your site - it requires a little bit of code, but YOU CAN DO IT! Let’s jump into this tutorial:
First, we will need to get access to the FontAwesome library onto your website.
You can do this by navigating to Settings - Advanced - Code Injection.
In the Header section, paste the following code and click Save:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
This just links your site to the font-awesome library, so your website knows what you are talking about when you refer to different icons (which will be explained below).
NOW YOU HAVE ACCESS TO USE WHATEVER ICONS YOU WANT!
But how do you actually put the icons on your site?
Here’s where the code comes in.
Wherever you want to add the icon, you are going to add a new Markdown block.
In this Markdown block, you will paste the code that refers to your icon. Here is an example of what that code should look like:
<i class="fa fa-mobile-phone fa-3x" style="color:#8a370e"></i>
Yep, I’m speaking in another language now, right? Well here is an easy explanation of each part of the code, so you can customize it!
<i class="fa fa-mobile-phone fa-3x" style="color:#8a370e"></i>
The above bolded section of code stands for the name of the icon that you want to use.
For a complete list of icons you can incorporate into your site, visit the FontAwesome website.
From this list, you will take the name of the icon (i.e. icon-mobile-phone) and replace icon with fa (i.e. fa-mobile-phone) to put in your code. Super easy!
<i class="fa fa-mobile-phone fa-3x" style="color:#8a370e"></i>
Now, if you want to change the size of the icon, that’s what the above bolded section is for. This example is showing the icon at 3x its size - so just make the number larger or small, depending on what size you want it to be on your page.
<i class="fa fa-mobile-phone fa-3x" style="color:#8a370e"></i>
Lastly, you can easily change the color with the above bolded code. Just enter the hex color of your choice, and the icon will change to that color.
WOOHOO!!! You are now a coding expert ;) At least when it comes to icons.
Although it may seem intimidating, it is actually really easy to get these icons on your website - and you don’t have to worry at all about pixilation, as it should render correctly at any size for your site.
Want more website building hacks? Then check out my tips for building a testimonial slider on your Squarespace 7.1 website here!
