<li>标签上的FontAwesome 5替换显示空方块

Question

尝试使用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>并正确呈现字体（虽然没有正确设置样式）。

Answer 1

使用Font Awesome 5的最后一个版本，您可以通过添加data-search-pseudo-elements来启用使用JS版本的伪元素，如下所示：

＆＃13;

＆＃13;

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;

＆＃13;

＆＃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版本：

＆＃13;

＆＃13;

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;

＆＃13;

＆＃13;

因此，为了获得您想要的内容，您需要加载包含字体和使用图标的旧方法的CSS版本，并调整字体名称，如下所示：

＆＃13;

＆＃13;

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;

＆＃13;

＆＃13;

Answer 2

如Font Awesome的文档中所述，如何启用Pseudo class ...

＆＃13;

＆＃13;

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;

＆＃13;

＆＃13;

Answer 3

如果你使用包管理器在你的项目中安装 fontawesome（我在 Rails 项目中使用 yarn），你不仅要导入 js 资源，还要导入 css 资源：

.button span:after {
  content: '\00bb';