I've used images in place of list style default icons before with no issue. For some reason, probably simple & dump, I can't get this one to work properly. I'm wanting the text to show directly to the right of the new icon image. I have the code over @ codepen.

HTML

<ul>
  <li><a href="#"><h6>Test Item</h6><span>October 1</span></a></li>
  <li><a href="#"><h6>Test Item</h6><span>October 3</span></a></li>
  <li><a href="#"><h6>Test Item</h6><span>October 5</span></a></li>
</ul>

CSS

li { list-style-image: url('http://cdn4.iconfinder.com/data/icons/cologne/32x32/calendar.png'); }
li a { vertical-align: top; }
li h6 { font-size: 14px; margin: 0px; }
li span { font-size: 12px; }
a { text-decoration: none; }