Append Font Awesome Icon to <li>

debugcn Published at Dev

Sebb_T

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.

Shtut

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.