尝试使用Font Awesome图标替换列表项标记上的项目符号类型,但我得到一个空方块:
HTML
<ul>
<li class="testitems">List Item 1</li>
<li class="testitems">List Item 2</li>
<li class="testitems">List Item 3</li>
<li class="testitems">List Item 4</li>
<li class="testitems">List Item 5</li>
</ul>
CSS
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems:before {
font-family: "FontAwesome";
content: "\f058";
margin: 0 5px 0 -15px;
color: #004d00;
display: inline-block;
}
我知道字体库正在加载,因为我能够使用<i class="fas fa-check-circle"></i><li class="testitems">List Item 1</li>
并正确呈现字体(虽然没有正确设置样式)。
答案 0 :(得分:6)
使用Font Awesome 5的最后一个版本,您可以通过添加data-search-pseudo-elements
来启用使用JS版本的伪元素,如下所示:
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems:before {
font-family: "Font Awesome 5 Free";
content: "\f058";
display:none; /* We need to hide the pseudo element*/
}
/*target the svg for styling*/
.testitems svg {
color: blue;
margin: 0 5px 0 -15px;
}
&#13;
<script data-search-pseudo-elements src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<ul>
<li class="testitems">List Item 1</li>
<li class="testitems">List Item 2</li>
<li class="testitems">List Item 3</li>
<li class="testitems">List Item 4</li>
<li class="testitems">List Item 5</li>
</ul>
<i class="fa fa-user"></i>
&#13;
您可以查看文档以获取更多详细信息:https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#with-svg-js
旧答案
正如您在此问题中看到的那样Using Font Awesome icon for bullet points, with a single list item element您可以使用内容和伪元素轻松设置图标,但需要注意,因为Font Awesome 5正在使用SVG,如果使用SVG这个技巧就不会起作用你使用推荐的JS版本:
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems:before {
font-family: "FontAwesome";
content: "\f058";
margin: 0 5px 0 -15px;
color: #004d00;
display: inline-block;
}
&#13;
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<ul>
<li class="testitems">List Item 1</li>
<li class="testitems">List Item 2</li>
<li class="testitems">List Item 3</li>
<li class="testitems">List Item 4</li>
<li class="testitems">List Item 5</li>
</ul>
<i class="fa fa-user"></i>
&#13;
因此,为了获得您想要的内容,您需要加载包含字体和使用图标的旧方法的CSS版本,并调整字体名称,如下所示:
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems:before {
font-family: "Font Awesome\ 5 Free";
content: "\f058";
margin: 0 5px 0 -15px;
color: #004d00;
display: inline-block;
}
&#13;
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<ul>
<li class="testitems">List Item 1</li>
<li class="testitems">List Item 2</li>
<li class="testitems">List Item 3</li>
<li class="testitems">List Item 4</li>
<li class="testitems">List Item 5</li>
</ul>
<i class="fa fa-user"></i>
&#13;
答案 1 :(得分:1)
如Font Awesome的文档中所述,如何启用Pseudo class ...
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems::before {
font-family: "Font Awesome 5 Solid";
content: "\f058";
display: none;
}
.user::before{
font-family: "Font Awesome 5 Solid";
content: "\f007";
display: none;
}
&#13;
<script>FontAwesomeConfig = { searchPseudoElements: true };</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<ul>
<li class="testitems">List Item 1</li>
<li class="testitems">List Item 2</li>
<li class="testitems">List Item 3</li>
<li class="testitems">List Item 4</li>
<li class="testitems">List Item 5</li>
</ul>
<i class="fa fa-user"></i><br>
<a class="user" href="#">User</a>
&#13;
答案 2 :(得分:0)
如果你使用包管理器在你的项目中安装 fontawesome(我在 Rails 项目中使用 yarn),你不仅要导入 js 资源,还要导入 css 资源:
.button span:after {
content: '\00bb';