How to Change the Bullet Symbol in an Unordered List without Using an Image

When I redesigned my site a few years ago, I decided that I wanted a bulleted list menu, but I didn’t want to use images, and I didn’t want to use the traditional disc, circle, or square that comes “built in,” but I also didn’t want to use an actual image.

To accomplish this, I used a Unicode escape code to produce the little single quote symbol. But it is also possible to just paste a symbol right into the CSS. This is the CSS and HTML you’ll need to use. You can play with the padding to suit your specific needs. {
     list-style: none;
     padding-left: 0;
     position: relative;
     margin-left: 30px;
} li {
     padding-left: 20px;
} li:before {
     content: "❤ ";
     position: absolute;
     left: 0px;

To produce:

  • List Item One
  • List Item Two
  • List Item Three

Important Tip! WordPress changes some symbols without permission, as do certain browsers. For example, on my desktop, using the Chrome browser, I see the heart in the code box above as red, but the bullets in the example as black. Using Chrome on my Samsung Galaxy S-8 Active phone, however, they are all red. Similarly, a shamrock shows up as green, and a large diamond, even when instructed to appear blue, appears red. So if color and absolute appearance is important to your symbol, you may wish to use an image anyway.