将“真棒字体”图标附加到<li>

Question

So, I would like to append an Font Awesome Icon to a new created li

On click I'm creating a new li , which needs two icons on it.

HTML:

<ul class="todo" id="todo">
</ul>

JS:

function addItemToDo() {

    var list = document.getElementById('todo');

    var itemName = document.getElementById('item').value;
    var task = document.createElement('li');

    task.appendChild(document.createTextNode(itemName));
    list.appendChild(task);

    /* ADD ICONS */
    task.className += "fa fa-trash-o fa-3x";
    task.className += "fa fa-check-circle-o fa-3x";
}

The new element gets created, the icons are 'bugged' somehow. I also tried to append them with the Unicode, which did not work for me either.

Thanks for your help.

Answer 1

You shouldn't add the font awesome classes to the li element, Instead you need to create something like this:

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

*from font awesome examples page

create an ' i ' element and set ITS class to the font awesome glyph you want.