Custom Bullet Point Icons

 

← Back to all Squarespace Tips
 

Sometimes bullet point lists can be less than exciting... If you want to make them look unique then this code will allow you to replace the standard bullet point with any image you like!

The values in bold can be changed to suit your site design. If you need help adding CSS to your Squarespace site please read our guide here.
 

Step 1: Add the CSS

Copy and paste the code below to the Custom CSS editor on your Squarespace site. This code includes two bullet icon styles - one for the 'bulleted' list and one for the 'numbered' list, so you can include two different styles!
 

// CUSTOM BULLET POINT ICONS //

ul, ol{
list-style-type: none;
}

// NUMBERED LIST //
ol li:before{
content: ' ';
display: inline-block;
background-image: url();
background-repeat: no-repeat;
background-size: 20px;
background-position: center;
width: 20px;
height: 20px;
position: absolute;
margin-left: -25px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

// BULLET POINT LIST //
ul li:before{ 
content: ' '; 
display: inline-block; 
background-image: url(); 
background-repeat: no-repeat; 
background-size: 20px; 
background-position: center; 
width: 20px; height: 20px; 
position: absolute; 
margin-left: -25px; 
margin-right: 0px; 
margin-top: 0px; 
margin-bottom: 0px; 
}


Step 2: Upload your new bullet point icon

Change the url() of the background-image to whichever image you would like to use.

To do this: in the CSS editor, click inside of the ( ) and then click 'Manage Custom Files', from here you can select an image file or upload a new one.

When you have done this you can adjust the size and positioning (by changing the bold values in the above code) to suit your site design!

 

 

Example bullet icons

 

Release & Update Information

Released 16/10/2017
Updated 18/10/2017 - Code updated to include a second set of bullet icons following a suggestion from Nicole Macdonald at January Made Design.