栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

使用JS + SVG版本时,Font Awesome 5显示空白方块

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

使用JS + SVG版本时,Font Awesome 5显示空白方块

如果您使用的是 CSS版本,请 阅读以下内容:FontAwesome5,为什么CSS内容没有显示?

使用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; }.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 >List Item 1</li>  <li >List Item 2</li>  <li >List Item 3</li>  <li >List Item 4</li>  <li >List Item 5</li></ul><i ></i>

您可以查看文档以了解更多详细信息:

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

启用伪元素

使用我们的SVG + JS框架时,默认情况下,禁用CSS伪元素来呈现图标。您需要将

<script data-search-pseudo-elements ... >
属性添加到
<script />
调用Font Awesome 的元素中。

将伪元素的显示设置为无

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



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/395268.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号