Custom Bullet Points

Look Demo

Easily change the bullet point symbol to your own icon. This plugin uses css editor and works with all template families.

How To Install

Add a bullet point list to any page and save when finished.

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Custom Bullet Point //

ul {
    display: block;
    list-style-type: decimal;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 30px;
}
  
  ul li {
    list-style-type: none;
}

// Bullet Point Symbol and Size //
  
ul[data-rte-list] li>*:first-child::before {
    content: '';
    display: inline-block;
    background-image: url(IMAGE-URL-HERE);
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: center;
    width: 18px;
    height: 18px;
    position: absolute;
    margin-left: -30px;
    margin-right: 0px;
    margin-top: 4px;
    margin-bottom: 0px;
}

Customize

Replace IMAGE-URL-HERE with the link to your own symbol or icon. Adjust background size, width, height, and margin-left to liking.

Make sure the background size, width, and height are all the same size.

License

This plugin comes with an Unlimited Use License. View License Terms