Using Font Awesome icons as bullets

Question

An example use case of font awesome is like this (as taken from their examples):

<ul class="icons">
    <li><i class="icon-ok"></i> Lists</li>
    <li><i class="icon-ok"></i> Buttons</li>
    <li><i class="icon-ok"></i> Button groups</li>
    <li><i class="icon-ok"></i> Navigation</li>
    <li><i class="icon-ok"></i> Prepended form inputs</li>
</ul>

This list renders fine for my purposes as long as the list items are 1 line. But if the list items are multi line then the 2nd line and further do not indent properly (by default).

It would be nice if these icons could be used as standard css bullets, since in this way multi line items would indent nicely automatically.

Is there an easy and elegant way to make this happen? It would be awesome if I could use mark-up like this:

<ul class="icon-bullets">
    <li class="icon-ok">Lists</li>
    <li class="icon-ok">Buttons</li>
    <li class="icon-ok">Button groups</li>
    <li class="icon-ok">Navigation</li>
    <li class="icon-ok">Prepended form inputs</li>
</ul>

I.e. reuse the specific icon classes, but make them part of the li-element.

Answer 1

For multi-column lists, I use this:

ul.twocolumn, ol.twocolumn {
  -moz-column-count: 2;
  -moz-column-gap: 5px;
  -ms-column-count: 2;
  -ms-column-gap: 5px;
  -webkit-column-count: 2;
  -webkit-column-gap: 5px;
  column-count: 2;
  column-gap: 5px;
  list-style-position: inside; /* bugfix for hidden bullets/numbers */
}

Normally when you declare it:

<ul class="fa-ul twocolumn">
  <li><i class="fa-li fa fa-whatever-icon"></i> foo</li>
  <li><i class="fa-li fa fa-whatever-icon"></i> bar</li>
</ul>

However, it won't work… Be aware that Font Awesome icons will NOT, for some reason, appear with a column-count greater than 1. Tested this with Chrome you will see the disparity when you toggle -webkit-column-count: 2