Replacing list bullets with images for different categories

You can disable the bullets using the list-style-type: none css rule and then use a background-image css style on the list item, or include a span (or some other element) inside the list item which would display the icon.

Something like this:

li {
  list-style-type: none;
}

.icon-play,
.icon-eat
{
   height: 20px;
   width: 20px;
   display: inline-block;
   background-repeat: none;
}

.icon-play
{
   background-color: #f08080;
   /* use a background image here */
}

.icon-eat
{
   background-color: #80f080;
   /* use a background image here */
}
<ul>
  <li><span class="icon-play"></span> Let's Play</li>
  <li><span class="icon-eat"></span> Let's Eat</li>
</ul>

---
And the css rules:

li {
    list-style-type: none;
}
.icon-play {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(Img/wmd-buttons.png?v=581875b1c136);
    background-repeat: no-repeat;
}

==================================

You could also apply this to pseudo elements
<li class="image-eat">Let's Eat</li>

and the CSS
li:before { content: ''; display: inline-block; width: 5px; height: 5px; } .image-eat:before { background: url(); }