css - 将堆叠的字体图标作为元素符号列表的正确标记是什么？

Question

我想在元素符号列表中使用 fontawesome 图标。该指南提供了以下标记:

<ul class="icons-ul">
  <li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li>
  <li><i class="icon-li icon-ok"></i>Buttons</li>
  <li><i class="icon-li icon-ok"></i>Button groups</li>
  <li><i class="icon-li icon-ok"></i>Navigation</li>
  <li><i class="icon-li icon-ok"></i>Prepended form inputs</li>
  <li><i class="icon-li icon-ok"></i>&hellip;and many more with custom CSS</li>
</ul>

简单。嗯？但是，我想使用 Font Awesome 堆栈而不是普通的旧图标。评论:

<span class="icon-stack">
  <i class="icon-check-empty icon-stack-base"></i>
  <i class="icon-twitter"></i>
</span>

问题是；我怎样才能将两者结合起来？在堆栈跨度类中粘贴 icon-li 不起作用。

Answer 1

这是您要找的吗？

  <ul class="icons-ul">

    <li>
      <span class="icon-stack icon-li">
        <i class="icon-check-empty icon-stack-base"></i>
        <i class="icon-ok"></i>
      </span>
      Buttons
    </li>
    <li>
      <span class="icon-stack icon-li">
        <i class="icon-check-empty icon-stack-base"></i>
        <i class="icon-ok"></i>
      </span>
      …and many more with custom CSS
    </li>
  </ul>