Lists are an important feature of well structured web page. They allow the reader to quickly access important information on a web page. Creating your own list items markers can add extra flair and uniqueness to your website.

There a few different ways to do this. The CSS property list-style-type offers a limited number of symbols. You can also utilize the list-style-image property, which specifies an image to be used as the list item marker.

W3schools shows the options on using the above properties here:
https://www.w3schools.com/css/css_list.asp

I prefer to use another method. We can use the CSS ::before selector insert content in front of the list item. First we disable the default list-style by setting it to none. Then we add the HEX character code of our choosing.

I find this to be the cleanest way to achieve this:

CSS Code

ul.hearts-list > li  {
    list-style: none;
    padding: 0;
    margin: 0;
    color: inherit;
}

ul.hearts-list li:before {
    content: "\2665"; /* HEX CODE for Heart 0x2665 */
    font-family: FontAwesome;
    display: inline-block;
    width: 0;
    position: relative;
    left: -20px;
    top: 0;
    width: 0;
    height: 0;
    color: red;
}

Example:

• Apples
• Oranges
• Pears

This link below is a good list of symbols and their HEX codes

https://www.toptal.com/designers/htmlarrows/symbols/

IMPORTANT: Be aware when copying HEX codes to use the correct format.

Often HEX codes are written like this &#x2665. To use that HEX we only need the number 2665, preceded by a backslash \2665

    content: "\2665"; /* HEX CODE for Heart 0x2665 */