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.
ul.my-custom-list {
list-style: none;
padding-left: 0;
position: relative;
margin-left: 30px;
}
ul.my-custom-list li {
padding-left: 20px;
}
ul.my-custom-list 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.