html 列表中的 Font Awesome 堆叠图像

Question

我正在尝试按照示例页面中的描述在列表中使用 Font Awesome 堆叠图像 http://fontawesome.io/examples/

列表：

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
</ul>

堆叠图像：

<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>

我无法正确对齐图像，如您在此 fiddle:

中所见

https://jsfiddle.net/uqL4aLyj/

有人知道如何正确对齐吗？

提前致谢

最大

Answer 1

fontawesome 页面上的示例使用 ordered/unordered 列表外的堆叠图像。用 <br> 标签分隔它们。

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
First item<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
Second item

Answer 2

这是因为 .fa-stack class 将 height、width 和 line-height 应用于 2em 的堆叠集图标。确保非堆叠图标与堆叠图标对齐的一种快速方法是将非堆叠图标本身视为一个图标堆叠。

您可以通过更改当前标记来实现此目的：

<li>
  <i class="fa fa-camera-retro"></i>
  text
</li>

收件人：

<li>
  <span class="fa-stack">
    <i class="fa fa-camera-retro fa-stack-1x"></i>
  </span>
  text
</li>

Modified JSFiddle demo.

html 列表中的 Font Awesome 堆叠图像

Font Awesome stacked images in html list

html-lists

font-awesome