How to create custom graphics, image and icon bullets in Squarespace 7.1?

The other day, I had this great idea to make my bullet points a little more creative. So I started searching for "how to make custom bullets in Squarespace 7.1" - and got a lot of search responses, but all to do with 7.0 version for Squarespace!

How interesting! Well, I figured this was a great opportunity to find this out for myself and share it with you all!

So, I opened up my developer view, turned on Code Block Identifier, hopped into my Squarespace Custom CSS page and created some magic.

In this blog post, I’ll show you how to create custom graphics, image and icon bullets in Squarespace 7.1!

CONTENT

1. Upload graphic or image icon to Squarespace

2. Find the Block ID for the specific text block

3. Custom CSS Code for new bullets

---

1. Upload graphic or image icon to Squarespace

You might already have a graphic or image file for the icon you intend to use as the new customised bullet.

If not, you can go create some in Canva or find some cool ones to download.

For this example, I'm going to use my favicon logo. But you can be as creative as you like here!

Then go into Design → Custom CSS → click on Manage Custom Files (at the bottom of the CSS panel) → select your .jpg or .png file.

2. Find the Block ID for a specific Text Block

Now you just have to find the appropriate Block ID! By this I mean, the text box with the bullets you want to change into the customised icons we found above.

If you want to have one text block column with Ticks and a separate text block column with Crosses, then this will be two different Block IDs.

I would recommend downloading a Chrome Extension for this. Here are two that I recommend:

1. Squarespace Code Block Identifier

2. Squarespace ID Finder

Both work great! I recently installed Squarespace ID Finder and LOVE it more because it shows you the Collection ID and Section ID as well. Whereas the first only shows you the Block IDs.

I also show you how to install and use the Squarespace Code Block Identifier - Chrome Extension in this blog post here.

read here

3. Custom CSS Code for new bullets

Great! Now all you have to do is copy and paste my CSS snippet below!

Hop into Design → Custom CSS → Copy and paste the CSS codes!

// custom image bullet icons for xxx page  //

#block-8c38cc93d62f422a2be8
{ ul[data-rte-list] li>:first-child:before {
content: "";
display:inline-block;
background-image: url(insert your image or graphic icon here);
background-repeat: no-repeat;
background-size: 20px;
background-position: left;
width: 20px;
height: 20px;
position: absolute;
margin-left: -30px;
margin-top: 5px;
}}

Customising Block ID:

• delete my #block-xxxxxxxxxxx and replace it with your own Block ID which you found in step 2.

• change the background-image: url between the url( ) to your desired icon by clicking on the "Manage Custom Files" at the bottom of your Custom CSS panel → and then clicking on the .jpg or .png file, which will then insert the file URL into the brackets.

• play around with the background-size to make it large or smaller.

• play around with margin-left to move it further to the left or right.

• play around with margin-top to move it up or down a little more.

---

Did that work for you? Let me know in the comments below and I'll get back to you! You can also message me here @arohavisuals.

And ... if you're wanting to just use simple ticks, crosses and arrow symbols as bullet icons in Squarespace 7.1, then check out my other article here: How to create custom 'tick, cross and arrow' bullets in Squarespace 7.1?

read here

Ooh, before you go! Check our (free) masterclass on how to get limitless leads from your website ;)

pin me .

---

Other articles I think you’d love: