How to add an icon to a Squarespace button

content block

Sep 26

Squarespace buttons are functional, but they often lack visual appeal. This tutorial will show you how to add custom icons to your buttons, significantly improving their design and effectiveness.

We'll cover two methods to add icons to your Squarespace buttons:

Adding icons to all buttons (small, medium, and large)
Customizing individual buttons

While the process is straightforward, the key challenge lies in identifying the correct button type. Squarespace uses over 15 different button types, each with its unique selector.

In the video tutorial below, you'll learn:

How to add icons to all buttons using CSS
Techniques for customizing specific button sizes
Methods for modifying individual buttons
Using unicode characters compatible with most Squarespace fonts

By the end of this tutorial, you'll be able to create more engaging, visually appealing buttons that can enhance your site's user experience and potentially improve click-through rates.

You’ll find some sample codes below to help you get started.

/* Add an icon after the text of all buttons */
.sqs-block-button-element:after{
content:”→”
}
/* change the block id to isolate a single button */
#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;
}