Custom Bullet Points

Submitted by Mikka Cruz

Custom Bullet Points

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

bullets_list.png

Step One

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

Screen Shot 2019-07-09 at 4.55.41 PM.png

Step Two

From your Squarespace account, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Step Three

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

Step Four

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.

Save and refresh the page. 👍

Moov Labs