將“真棒字體”圖標附加到<li>

Question

因此，我想將Font Awesome Icon附加到新創建的li

單擊時，我正在創建一個新li ，它需要兩個圖標。

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";
}

創建新元素后，圖標就以某種方式被“調試”。 我還嘗試用Unicode附加它們，這對我也不起作用。

謝謝你的幫助。

Answer 1

您不應該在li元素中添加超棒的字體類，而是需要創建如下代碼：

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

*來自字體很棒的示例頁面

創建一個“ i ”元素，並將ITS類設置為所需的真棒字形。