Website Building » Squarespace » How Do I Add Custom Icons to Squarespace?

How Do I Add Custom Icons to Squarespace?

Last updated on December 13, 2022 @ 2:03 am

Custom icons can add a unique touch to your Squarespace website. There are a few different ways to add them, depending on what you want to achieve.

The first way is to use an icon font, such as Font Awesome. This is the easiest method, as you can simply add the class name of the icon you want to use to any element on your page, and it will automatically display the icon. For example:

If you want to change the color of the icon, you can do so by adding CSS code to your site. For example:

.fa-envelope {
color: #ff0000;
}

The second way to add a custom icon is by using an image. This is a good option if you want more control over the appearance of the icon, or if you’re using a custom font that doesn’t have an icon for the thing you want to represent.

PRO TIP: If you are not comfortable with code, we recommend finding a developer to help you with this. Adding custom icons to your Squarespace site can be done with a little bit of code, but it’s important to note that this is advanced customization.

For example, let’s say you wanted to use a heart icon instead of an envelope. You could add this HTML code:

<img src="/path/to/heart-icon.png" alt="Heart Icon"/>

And then style it with CSS like so:

img {
width: 16px;
height: 16px;
}

Conclusion: Adding custom icons to your Squarespace website is easy and can be done in a few different ways. The most common method is by using an icon font, but you can also use images if you want more control over the appearance of the icons.

Kathy McFarland

Kathy McFarland

Devops woman in trade, tech explorer and problem navigator.