Add An Icon to a Button in Squarespace

May 17

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

Button design can be a little limiting in a Squarespace site, but this tutorial will help you change that!

We’ll take a standard on-page button and add a custom icon to it in two unique ways.

In this tutorial, we are going to add an icon after the text to a button in a Squarespace website. Sounds simple, and it is! Well, kind of 😅 –The tricky part is saying the right name for the right button!

There are over 15 different types of buttons with unique names in Squarespace.

Here is a link to my list of unicode characters compatible with most fonts in Squarespace: https://insidethesquare.co/unicode

Here are the codes:

If you want to add an icon to all the small, medium, and large buttons background colors, this code will do that for you:

.sqs-block-button-element:after{content:”→”}

If you want to isolate just the small, add “--small” to the end of the code name (Selector) above, like this:

.sqs-block-button-element–small:after{content:”→”}

If you only want to change a single button, you can add the block ID to the start of the code:

#block-123456 .sqs-block-button-element:after{content:”→”}

To use a custom font, try this code:

.sqs-block-button-element:after{
content: “a”;
font-family: ‘Your-Font-Here’!important;
}

If you don’t know the block ID, you can use this chrome extension to find out what it is. InsideTheSquare is not affiliated with this extension or its creators, just a fan!