Using Font Awesome icons as bullets

The answer by Johan is incorrect. Font Awesome uses web fonts, NOT a large background image!

It should be noted you can simply put the class onto the li tags, like so:

<ul>
    <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>

However, there's one caveat, it won't work in ie7, even with the conditional ie7 stylesheet. The list items disappear, just leaving the icons! If your not supporting ie7, then simply leave out the conditional stylesheet, then at least those unfortunate enough to be using ie7 will still be able to read your lists, sans icons!

Hope this helps.

Fashionably late... remove the class icon-ok from the li's and set the list to use an icon as the bullet. Grab the unicode character from the Font Awesome details page for the icon. In this case icon-ok has been migrated to icon-check in version 4. The unicode is the same f00c.

ul.ok {
    list-style-type: none;
    margin-left: 0;
    padding-left: 1em;
}

ul.ok li:before {    
    font-family: 'FontAwesome';
    content: '\f00c';
    margin:0 5px 0 -15px;
    color: #f00;
}


<ul class="ok">
    <li>Lists</li>
    <li>Buttons</li>
    <li>Button groups</li>
</ul>

Using Font Awesome icon for bullet points, with a single list item element

Thanks @armfoot for the inspector info. I've added this screenshot explaining how to do it, clicking on the ::before element in the DOM tree.

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

I know I'm late to the party, but I don't think any of the solutions, even the selected one, solves the problem completely. This is about solving the specific problem as accurately as possible.

According to the OP's core question: "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."

I had the same issue and here's how I solved it: add a padding-left: to the <ul>, then add a 'positive' margin-right: and negative margin-left: to the li:before.

What you'll see in the demo is basically this: margin:0 5px 0 -15px;.

DEMO

Some notes:

1. You will only need CSS for this solution, no need for any extra markup

2. This works with multi-line content, so if your content wraps to a second line or more, it will not appear under the icon/list item.

3. There is no need to use extra markup like Font Awesome and Bootstrap do it, that's just plain wrong because we all know we have to separate content from style from functionality. Adding extra markup for the sake of using icons is clearly code-bloat. My solution uses simple markup like so:

   <ul>
     <li>...</li>
     <li>...</li>
     <li>...</li>
   </ul>
   

4. Since I wasn't able to load a font, I used the » character as the content:'»' value to illustrate the icon/list item . However, I did leave all the @font-face declaration so anyone can use it and replace the path to their font file. Like so:

   url("path/to/font-name.woff") format("woff"),
   

5. You may need to play with the margin values in the li:before in order to position the icon/list-item properly, which you would have to do anyway when using any of the solutions above or FontAwesome's and Bootstrap's solutions.