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

查看:29
本文介绍了Font Awesome 5 使用 JS+SVG 版本时显示空方块的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

尝试用 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项目 1 和正确呈现的字体(尽管样式不正确).

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 版本,请阅读:Font Awesome 5,为什么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 伪元素渲染图标.您需要将 <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.

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆