如何获得令人惊叹的“图标作为项目符号”以获取属性列表样式位置：外部？
[英]How to get fontawesome "icons as bullet points" to get the property list-style-position: outside?
问题描述
So there is this link on the official font-awesome website about using their icons in a bulletpoint: https://fontawesome.com/how-to-use/on-the-web/styling/icons-in-a-list
所以在官方 font-awesome 网站上有一个关于在项目符号中使用他们的图标的链接： https ://fontawesome.com/how-to-use/on-the-web/styling/icons-in-a-list
Which states you can do it like this:哪个州你可以这样做：
<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>
This looks like the icons are just being put in the li and not actually being the bullet points.这看起来像图标只是放在 li 中，而不是真正的要点。 Now I want to make sure whenever there's a new line of text for one of the bulletpoints, I want it to start on the same line as the text started on the previous line.现在我想确保每当有一个项目符号的新文本行时，我希望它与从前一行开始的文本在同一行开始。 However it's not doing that.然而，它并没有这样做。 It starts on the same line as the icon.它与图标在同一行开始。
An example of how it is:它是如何的一个例子：
An example of how I want it:我想要它的一个例子：
(Ignore the table around it) （忽略它周围的桌子）
I have already tried list-style-position: outside;我已经尝试过list-style-position: outside; , but: ， 但：
list-style-position: outside;
So it sounds logical that the next line of text aligns with the icon cause the icons are part of the content of the list items.因此，下一行文本与图标对齐听起来很合乎逻辑，因为图标是列表项内容的一部分。
2 个解决方案
解决方案1
1 2020-09-18 08:42:16
By default, it already behave as you want默认情况下，它已经按照您的意愿行事
Notes : can't show you code in comment.注意：无法在评论中显示代码。 It isn't an answer to your question as you certainly have problem otherwise on your code.这不是您问题的答案，因为您的代码肯定有其他问题。
<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>
解决方案2
0 2020-09-18 08:44:47
The fontawesome's bullets are positioned as you wanted, outside. fontawesome 的子弹可以根据需要在外面放置。
This is done by the inclusion of the fa-li class in the span tag.这是通过在 span 标签中包含 fa-li 类来完成的。
<span class="fa-li">
and the css that goes with it:以及与之配套的 css：
.fa-li {
left: -2em;
position: absolute;
text-align: center;
width: 2em;
line-height: inherit;
}
This style is from fontawesome.css which needs to be included.此样式来自需要包含的 fontawesome.css。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.