CSS 使用 Font Awesome 图标作为项目符号，带有单个列表项元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12468359/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Font Awesome icon for bullet points, with a single list item element
提问by BaronGrivet
We'd like to be able to use a Font Awesome ( http://fortawesome.github.com/Font-Awesome/) icon as a bullet point for unordered lists in a CMS.
我们希望能够使用 Font Awesome ( http://fortawesome.github.com/Font-Awesome/) 图标作为 CMS 中无序列表的要点。
The text editor on the CMS only outputs raw HTML so additional elements/ classes cannot be added.
CMS 上的文本编辑器仅输出原始 HTML，因此无法添加其他元素/类。
This means displaying the icons when the mark up looks like this:
这意味着当标记如下所示时显示图标：
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
The first problem I can see if Font Awesome requires a different font-family attribute, which would require a separate element.
第一个问题我可以看到 Font Awesome 是否需要不同的 font-family 属性，这将需要一个单独的元素。
Is this possible using pure CSS? Or would I have to append the element to the beginning of each list item using something like jQuery?
这可以使用纯 CSS 吗？或者我是否必须使用 jQuery 之类的东西将元素附加到每个列表项的开头？
I realise we can use a fall back of a background image, but it would be great to use Font Awesome if possible.
我意识到我们可以使用背景图像的回退，但如果可能的话，使用 Font Awesome 会很棒。
回答by Inluxc
回答by lol
The new fontawesome (version 4.0.3) makes this really easy to do. We simply use the following classes:
新的 fontawesome（4.0.3 版）使这变得非常容易。我们简单地使用以下类：
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons (like these)</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>to replace</li>
<li><i class="fa-li fa fa-square"></i>default bullets in lists</li>
</ul>
As per this (new) url: http://fontawesome.io/examples/#list
根据这个（新）网址：http: //fontawesome.io/examples/#list
回答by Ryan
I'd like to build upon some of the answers above and given elsewhere and suggest using absolute positioningalong with the :before pseudo class. A lot of the examples above (and in similar questions) are utilizing custom HTML markup, including Font Awesome's method of handling. This goes against the original question, and isn't strictly necessary.
我想建立在上面和其他地方给出的一些答案的基础上，并建议使用绝对定位和:before 伪类。上面的许多示例（以及类似问题中）都使用自定义 HTML 标记，包括 Font Awesome 的处理方法。这与最初的问题背道而驰，并不是绝对必要的。
ul {
list-style-type: none;
padding-left: 20px;
}
li {
position: relative;
padding-left: 20px;
margin-bottom: 10px
}
li:before {
position: absolute;
top: 0;
left: 0;
font-family: FontAwesome;
content: "\f058";
color: green;
}
That's basically it. You can get the ISO value for use in CSS content on the Font Awesome cheatsheet. Simply use the last 4 alphanumerics prefixed with a backslash. So []becomes \f058
基本上就是这样。您可以在Font Awesome 备忘单上获取用于 CSS 内容的 ISO 值。只需使用带有反斜杠前缀的最后 4 个字母数字即可。于是[]变成\f058
回答by cereallarceny
There's an example of how to use Font Awesome alongside an unordered list on their examples page.
在他们的示例页面上有一个关于如何在无序列表旁边使用 Font Awesome 的示例。
<ul class="icons">
<li><i class="icon-ok"></i> Lists</li>
<li><i class="icon-ok"></i> Buttons</li>
<li><i class="icon-ok"></i> Button groups</li>
<li><i class="icon-ok"></i> Navigation</li>
<li><i class="icon-ok"></i> Prepended form inputs</li>
</ul>
If you can't find it working after trying this code then you're not including the library correctly. According to their website, you should include the libraries as such:
如果您在尝试此代码后找不到它的工作原理，那么您没有正确包含该库。根据他们的网站，您应该包括这样的库：
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/font-awesome.css">
Also check out the whimsical Chris Coyier's post on icon fontson his website CSS Tricks.
还可以在他的网站CSS Tricks上查看异想天开的Chris Coyier 关于图标字体的帖子。
Here's a screencastby him as well talking about how to create your own icon font-face.
回答by Ricardo Zea
@Tama, you may want to check this answer: Using Font Awesome icons as bullets
@Tama，您可能想查看此答案：使用 Font Awesome 图标作为项目符号
Basically you can accomplish this by using only CSS without the need for the extra markup as suggested by FontAwesome and the other answers here.
基本上，您可以仅使用 CSS 来完成此操作，而无需 FontAwesome 和此处的其他答案所建议的额外标记。
In other words, you can accomplish what you need using the same basic markup you mentioned in your initial post:
换句话说，您可以使用您在初始帖子中提到的相同基本标记来完成您需要的操作：
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
Thanks.
谢谢。
回答by Marco Allori
My solution using standard <ul>and <i>inside <li>
我使用标准<ul>和<i>内部的解决方案<li>
<ul>
<li><i class="fab fa-cc-paypal"></i> <div>Paypal</div></li>
<li><i class="fab fa-cc-apple-pay"></i> <div>Apple Pay</div></li>
<li><i class="fab fa-cc-stripe"></i> <div>Stripe</div></li>
<li><i class="fab fa-cc-visa"></i> <div>VISA</div></li>
</ul>
回答by Dush
In Font Awesome 5 it can be done using pure CSS as in some of the above answers with some modifications.
在 Font Awesome 5 中，它可以使用纯 CSS 来完成，就像在上面的一些答案中做一些修改一样。
ul {
list-style-type: none;
}
li:before {
position: absolute;
font-family: 'Font Awesome 5 free';
/* Use the Name of the Font Awesome free font, e.g.:
- 'Font Awesome 5 Free' for Regular and Solid symbols;
- 'Font Awesome 5 Brand' for Brands symbols.
- 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
*/
content: "\f1fc"; /* Unicode value of the icon to use: */
font-weight: 900; /* This is important, change the value according to the font family name
used above. See the link below */
color: red;
}
Without the correct font-weight, it will only show a blank square.
如果没有正确的字体粗细，它只会显示一个空白方块。
https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define
https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define
