如何获得令人惊叹的“图标作为项目符号”以获取属性列表样式位置：外部？

Question

所以在官方 font-awesome 网站上有一个关于在项目符号中使用他们的图标的链接： https ://fontawesome.com/how-to-use/on-the-web/styling/icons-in-a-list

哪个州你可以这样做：

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

这看起来像图标只是放在 li 中，而不是真正的要点。 现在我想确保每当有一个项目符号的新文本行时，我希望它与从前一行开始的文本在同一行开始。 然而，它并没有这样做。 它与图标在同一行开始。

它是如何的一个例子：

我想要它的一个例子：

（忽略它周围的桌子）

我已经尝试过list-style-position: outside; ，但：

列表样式位置：外面； 意味着项目符号将在列表项之外。 列表项的每一行的开头将垂直对齐

因此，下一行文本与图标对齐听起来很合乎逻辑，因为图标是列表项内容的一部分。

Answer 1

默认情况下，它已经按照您的意愿行事

注意：无法在评论中显示代码。 这不是您问题的答案，因为您的代码肯定有其他问题。

 <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <ul class="fa-ul"> <li><span class="fa-li"><i class="fa fa-check-square"></i></span>List with<br/>new line</li> <li><span class="fa-li"><i class="fa fa-spinner fa-pulse"></i></span>List with<br/>new line<br/>new line<br/>new line<br/>new line</li> <li><span class="fa-li"><i class="fa fa-square"></i></span>hello, i have no new line</li> </ul> </body>

Answer 2

fontawesome 的子弹可以根据需要在外面放置。

这是通过在 span 标签中包含 fa-li 类来完成的。

<span class="fa-li">

以及与之配套的 css：

.fa-li {
    left: -2em;
    position: absolute;
    text-align: center;
    width: 2em;
    line-height: inherit;
}

此样式来自需要包含的 fontawesome.css。

如何获得令人惊叹的“图标作为项目符号”以获取属性列表样式位置：外部？

问题描述

2 个解决方案

解决方案1
1 2020-09-18 08:42:16

解决方案2
0 2020-09-18 08:44:47

如何获得令人惊叹的“图标作为项目符号”以获取属性列表样式位置：外部？

问题描述

2 个解决方案

解决方案1 1 2020-09-18 08:42:16

解决方案2 0 2020-09-18 08:44:47

解决方案1
1 2020-09-18 08:42:16

解决方案2
0 2020-09-18 08:44:47