Add Font Awesome icons to your Squarespace website

You can use this awesome code using the Squarespace code block to integrate Font Awesome icons into your site. Follow these easy steps:

---

Add to code injection

To use Font Awesome, you need to load its library. Add the following code to your Site Header:

• Go to Settings > Advanced > Code Injection.

• Paste this in the Header or Footer section:

<script src="https://kit.fontawesome.com/YOUR_KIT_CODE.js" crossorigin="anonymous"></script>

If you have a Font Awesome pro account, replace YOUR_KIT_CODE with the unique code from your Font Awesome account. If you are using the free icons available, you can just leave YOUR_KIT_CODE in.

---

Use a Code Block to Display Icons

Now, you can use a Code Block in Squarespace to display your Font Awesome icons anywhere on the site.

• Add a Code Block to your page.

• Use the following code to add an icon:

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

This will display a rocket icon. Replace fa-rocket with the name of the icon you want from the Font Awesome Icon List.

Changing the icon style (only available on pro account)

Font Awesome offers a number of different styles of their icons. Instead of using the ‘fas’ within the code as we have above, you’ll need to switch it out for whichever style you’ve chosen.

Here’s what the classes mean:

• fal = Light style (Pro)

• fas = Solid style (Free and Pro)

• far = Regular style (Pro)

• fab = Brand icons (Free and Pro)

• fad = Duotone style (Pro)

---

Add CSS to customise the icon

You can style the icons with CSS for different sizes and colors. Add custom CSS in Design > Custom CSS, for example:

.fa-camera {
    color: #ff6347; /* Change color */
    font-size: 2rem; /* Increase size */
}