8

尝试用 Font Awesome 图标替换列表项标签上的项目符号类型，但我得到一个空方块：

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;
}
<script src="https://use.fontawesome.com/releases/v5.12.0/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="fas fa-check-circle"></i><li class="testitems">List Item 1</li>并且正确渲染了字体（尽管样式不正确）。

4

3 回答 3

14

如果您使用的是CSS 版本，请阅读：Font Awesome 5，为什么没有显示 CSS 内容？

使用 Font Awesome 5 的最新版本，您可以通过添加以下内容来启用在 JS 版本中使用伪元素data-search-pseudo-elements：

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;
}
<script data-search-pseudo-elements src="https://use.fontawesome.com/releases/v5.13.0/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>

您可以查看文档以获取更多详细信息：

如果你使用我们的 SVG + JS 框架来渲染图标，你需要做一些额外的事情：

启用伪元素

使用我们的 SVG + JS 框架时，默认禁用使用 CSS 伪元素呈现图标。您需要将<script data-search-pseudo-elements ... >属性添加到<script />调用 Font Awesome 的元素。

将伪元素的显示设置为无

由于我们的 JS 会找到每个图标引用（使用您的伪元素样式）并自动将一个图标插入到您页面的 DOM 中，因此我们需要隐藏真实的 CSS 创建的呈现的伪元素。

于 2018-02-12T19:17:12.807 回答
1

正如Font Awesome文档中关于如何启用伪类的说明...

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;
}
<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>

于 2018-02-20T21:25:21.913 回答
0

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

import "@fortawesome/fontawesome-free/js/all"
import "@fortawesome/fontawesome-free/css/all"
于 2021-08-10T14:30:49.607 回答