使用JS + SVG版本时，Font Awesome 5显示空白方块 [英] Font Awesome 5 shows empty square when using the JS+SVG version

问题描述

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

Attempting to replace the bullet type on an list item tag with a Font Awesome icon but I am getting an empty square:

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>并且字体呈现正确(尽管样式不正确).

I know the font library is loading because I was able to use <i class="fas fa-check-circle"></i><li class="testitems">List Item 1</li> and the font rendered properly (though not styled properly).

推荐答案

^{如果您使用的是 CSS版本，请阅读以下内容:}

^{If you are using the CSS version read this: Font Awesome 5, why css content is not showing?}

使用Font Awesome 5的最新版本，您可以通过添加data-search-pseudo-elements，如下所示，将伪元素与JS版本一起使用:

Using the last release of the Font Awesome 5 you can enable the use of pseudo-element with the JS version by adding data-search-pseudo-elements like below:

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>

您可以检查

You can check the documentation for more details :

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

If you’re using our SVG + JS framework to render icons, you need to do a few extra things:

启用伪元素

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

Using CSS Pseudo elements to render icons is disabled by default when using our SVG + JS Framework. You’ll need to add the <script data-search-pseudo-elements ... > attribute to the <script /> element that calls Font Awesome.

将伪元素设置为无显示

由于我们的JS将找到每个图标引用(使用伪元素样式)并将图标自动插入页面的DOM中，因此我们需要隐藏渲染的由CSS创建的真实伪元素.

Since our JS will find each icon reference (using your pseudo element styling) and insert an icon into your page’s DOM automatically, we’ll need to hide the real CSS-created pseudo element that’s rendered.

这篇关于使用JS + SVG版本时，Font Awesome 5显示空白方块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！