Custom Bullet Points

---

Description

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. You can also adjust the background size, width, height, and margin-left values to your liking.

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

---