How to Add Font Awesome Icons to Squarespace

Let’s take a look at how to add icons in Squarespace. After the guide, you’ll have a Squarespace icon library built in to your site.

Too bad icons isn’t built into Squarespace, but thanks to Font Awesome we can add over 1600 free icons to Squarespace.

Enjoy!

What is Font Awesome?

So, what is Font Awesome? It is a icon library of 1600+ free icons to add to your website. Font Awesome is not like regular images, the library is made from the ground up to be used on websites. You’ll see the pros of this later in this article.

Thanks to its ease of use and flexibility, Font Awesome has grown to be a very popular way of adding icons on websites.

How to add Font Awesome icons to Squarespace

Follow these three simple steps to add your first Squarespace icon:

1. Add the icon library

To add the Font Awesome icon library, log in to your site and click Website > Website Tools (scroll down) > Custom CSS, and paste this code:

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

2. Select an icon

Visit the Font Awesome library. When you have found an icon that you like, click on it and copy the html code (as on the image above).

3. Add the icon

The last step is to add the icon to your site.

Edit your site and add a code block. A code block can be added by clicking on the blue plus signs while editing. Finally, paste the html code inside the code block (that you got from step 2).

Ta-da! Now you know how to add icons to Squarespace. Your icon should now be added to your site.

4. Customize the icon (optional)

Now to the fun part, customizing the icons! As there’s a lot of different customization options, we’ll cover this in a separate part in the article.

To add a customization to an icon, simply add the class to the html. For example - without customization:

<i class="fas fa-child"></i>

With customization:

<i class="fas fa-child fa-sm"></i>

Customizing Squarespace icons

Font Awesome icons can be customized in a lot of different ways to fit well with your Squarespace website. Now we’ll go through all the different customization options.

First, for reference, this is what icons will look like when they are first added (without the customization):

Sizing icons

Example:

<i class="fas fa-child fa-2x"></i>

Changing the size of the Font Awesome icons are super easy. Simply replace fa-2x with the size that you prefer. Here are all the different sizes, ranging from smallest to largest:

fa-xs
fa-sm
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
fa-6x
fa-7x
fa-8x
fa-9x
fa-10x

Coloring icons

Set different colors on the icons to match your Squarespace site. Replace #FF33AA with your own color code.

Example:

<i class="fas fa-child" style=”color: #FF33AA”></i>

Animating icons

Make the icons spin! Works especially well with loading icons, but will look pretty cool with most icons.

Example:

<i class="fas fa-child fa-spin"></i>

Centering icons

Need to center the icons? No problem, here’s how to center font awesome icons in Squarespace.

Example:

<i class="fas fa-child fa-2x"style="text-align:center; width: 100%;"></i>

Stacking icons

Use multiple different Font Awesome icons to be stacked in your Squarespace site.

Example:

<span class="fa-stack">  
  <i class="fas fa-child"></i>
</span>
<span class="fa-stack">  
  <i class="fas fa-child"></i>
</span>
<span class="fa-stack">
  <i class="fas fa-child"></i>
</span>

Rotating icons

Example:

<i class="fas fa-child fa-rotate-180"></i>

Rotating and flipping icons enables you to do a lot more with the font awesome icons. Only creativity sets the border with this customization!

Replace fa-rotate-180 with an option below that you prefer. Here are all the different options:

fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-rotate-112 (rotate custom value)
fa-flip-horizontal (mirrors icon horizontally)
fa-flip-vertical (mirrors icon vertically)
fa-flip-both (mirrors icon horizontally & vertically)

Bonus: More cool icon animations

This plugin can animate any block on your Squarespace site, including any icon. Select between five custom animations that can be added in one click.

Bonus 2: Hide an icon on mobile

This plugin makes it possible to make a more dynamic site by hiding selected icons on mobile.

Squarespace icon library alternatives

Add millions of Squarespace icons (with Flaticon)

If you are using the newest version of Squarespace, there’s an even simpler way to add a Squarespace icon library to your site.

Here’s how to add 8 million free Squarespace Icons using Flaticon.

Animated social icons (with Spark Plugin)

Squarespace has its own library of social icons that can be animated with the Spark Plugin. Making them animate is as simple as clicking a button.

Here’s how to add animated social icons:

1. Add a new “Social Links” block to your Squarespace site.

2. Open Spark Plugin and click “Boosted Social Links”. If you don’t have Spark Plugin, you can get Spark Plugin here.

Google Material Icons in Squarespace

Another Squarespace icon library is to use Google Material Icons. Compared to Font Awesome, Material Icons are often used in UI’s and apps, so if you’re looking for something techier, it might be the way to go.

For websites, especially Squarespace sites, I would recommend Font Awesome over Material icons.

Installing Material Icons is pretty much the same as installing Font Awesome icons.

To install Material Icons on Squarespace, do this:

1. Go to Website > Website Tools (scroll down) > Code Injection, and paste this code:

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

2. Then select the icon here.

3. Finally, add the icon code inside a code block. Example:

<span class="material-icons-outlined">settings</span>

So… which Squarespace icons do you like the best?

Now you know how to add icons in Squarespace.

For most websites, Font Awesome is the best free Squarespace icon library, and it gives you the ability to add over 1600 different icons to your website.

The icons can give your Squarespace website a unique character and stand out from the rest, and sometimes help you explain certain topics.

Hope you enjoyed the article.