How to add inline icons in Squarespace 7.1

Hello there!

You've probably Googled how to add icons to Squarespace websites and found several ways to do so. You can add icons with code blocks or custom CSS, but have you ever wondered if there was an easier way? Imagine being able to add icons in line with text, like the way you do with emojis.

Well, I've got good news: It's possible with Font Awesome! Font Awesome is an easy-to-use icon library and toolkit that allows me to add icons as text. I've used it in Photoshop, Illustrator, Figma, Webflow, and Convertri. It is amazing!

However, I've never used it in Squarespace... until now:

Here's how to add inline icons in Squarespace 7.1:

1. Go to fontawesome.com. Once you're there, you can either go Pro or get started for free. (I chose the free route.)

2. Enter your email address and click Send Kit Code.

3. Then check your inbox and confirm.

4. After you've confirmed your email address, the Font Awesome website will open up again. Here, you'll see your custom code that will enable you to use the web font in your project. It will look something like this:
   
   Add Your Kit's Code to a Project

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

5. Copy the code and open Squarespace.

6. Go to Settings > Advanced > Code Injection.

7. Enter your Kit's code under Header.

   Tip: Once you add more code snippets in this section, it can get pretty messy. To keep it organized, you can add titles/descriptions by using an HTML comment tag. This is how my code looks:
   

   <!--- Font Awesome ---> 
   <script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script> 

8. Click Save and go back Home.

9. Go to Design > Custom CSS.

10. Enter the following code and click Save.

    /* FONT AWESOME */
    a[href*="awesome-"]{
    text-decoration: none; 
    padding-right: 12px; cursor: text;
    }
    
    a[href*="#awesome-solid"]{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    }
    
    a[href*="#awesome-regular"]{
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    }
    
    a[href*="#awesome-brands"]{
    font-family: "Font Awesome 5 Brands";
    }

    
    Let me dive briefly into the code.

    The first quarter targets all links that contain “awesome-”:

    a[href*="awesome-"]{
    text-decoration: none;
    padding-right: 12px;
    cursor: text;
    }

    It removes the underline from these links, adds some padding to the right, and changes the cursor to text. (Here's a reference to the different kinds of cursors.) So make sure that this doesn't conflict with links that you'd actually want to work. You'll understand more in the next step.

    The remaining 3/4 of the code refers to the different font styles available to free users. These are Solid, Regular, and Brands:

    a[href*="#awesome-solid"]{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    }
    
    a[href*="#awesome-regular"]{
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    }
    
    a[href*="#awesome-brands"]{
    font-family: "Font Awesome 5 Brands";
    }

    You can view the different icons under each category here.

    P.S. I believe there are more available styles for Pro. Let me know if you need help with that.

    P.P.S. The cheatsheet link above is for Font Awesome v5. As of writing this, there's already a beta version for Font Awesome v6. Gives you an idea of how old this article is 😉

11. Now time to add icons! Go to any page on your website and add text. For example:

    Connect with me on Twitter

12. In order to add an icon, go again to the cheatsheet, choose one, copy, and paste. It will probably look like this. Don’t panic.

    
     Connect with me on Twitter

13. Highlight the icon and add a link. Now the link you’ll add will depend on the type of icon you’ve selected:

    • If it’s of Solid style, then add the link “#awesome-solid”.

    • If it's Regular, then add “#awesome-regular”.

    • And you guessed it, if it's from the Brand icons, then add the link “#awesome-brands”.

    These links will lead to nowhere. It simply allows us to target this particular text and change its font family to Font Awesome.

    If you want to add a working link to the icon, you can still do so the normal way and then add “#awesome-[enter style here]” at the end. For example, here’s an icon leading to my Twitter account:

    Connect with me on Twitter
    

    The link used above is: https://twitter.com/abbycastrooo#awesome-brands

---

Pros

• This method allows you to add icons as text.

• Because the icons are considered text, you can easily customize them using custom CSS (e.g. font color on hover, etc.)

• You don’t need to create your own icons or scour the web for new ones.

Cons

• You can’t add custom icons (unless you pay for Pro or create a custom font).

• You are limited to Font Awesome’s library (though I would never use “limited” to describe it).

---

I hope that made sense. Send me a message if it got a little confusing towards the end. And if you were able to successfully apply the code, I'd love to see it in action! Send me some good vibes ❤️

---

Enjoyed this article? Share it on Pinterest!