How to add an icon to a Squarespace button

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:

  1. Adding icons to all buttons (small, medium, and large)

  2. 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;
}

Unicode Character List

A list of symbols compatible with Squarespace.

 
insidethesquare


Grab my collection of custom codes for Squarespace: 
→ insidethesquare.co/css

https://insidethesquare.co
Previous
Previous

How to change the calendar colors in Squarespace

Next
Next

How to create gradient buttons in Squarespace