javascript - 将 Font Awesome 图标附加到 <li>

Question

所以，我想将 Font Awesome 图标附加到新创建的 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

您不应该将 font Awesome 类添加到 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 类设置为您想要的很棒的字体字形。