Allow usage of icons for lists

[xyeLz]

I was hoping it would be possible to use the ⭐ or :star-icon: emoji/icon as my bullet for lists instead of the built-in checkbox or dot.

[geoffreymcgill]

This is possible using a little custom CSS.

<style>
ul.stars {
  list-style: "⭐  ";
  list-style-position: outside;
}
ul.stars ul li {
  list-style-type: circle;
}
</style>
{ .stars }
- Item 1
- Item 2
- Item 3

The content of that <style> block could also be moved out of the page and included site wide by adding to the _includes/head.html file.

<!-- include this snippet into the file _includes/head.html -->
<style>
ul.stars {
  list-style: "⭐  ";
  list-style-position: outside;
}
ul.stars ul li {
  list-style-type: circle;
}
</style>

The list syntax on the page would then just be the following:

{ .stars }
- Item 1
- Item 2
- Item 3

The above custom style could also be inlined, as the following sample demonstrates:

{ style="list-style: '⭐  ';list-style-position: outside; li { list-style-type: circle; } " }
- Item 1
- Item 2
- Item 3

Hope this helps.

[geoffreymcgill]

Please see issue #603 and the following comment for several other samples on how to create icon lists, see

#603 (comment)

Hope this helps.