首页 > web前端 > css教程 > 为什么 Font Awesome 5 SVG 列表项项目符号显示为空方块?

为什么 Font Awesome 5 SVG 列表项项目符号显示为空方块?

DDD
发布: 2024-12-16 03:31:09
原创
747 人浏览过

Why Are Font Awesome 5 SVG List Item Bullets Showing as Empty Squares?

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

当尝试将 Font Awesome 5 与 JS SVG 版本一起使用时,用户可能会遇到列表项项目符号呈现为空方块的问题。此问题是由于 Font Awesome 5 默认禁用伪元素支持而产生的。

解决方案

为 JS 版本的 Font Awesome 启用伪元素支持5、在脚本中添加data-search-pseudo-elements属性标签:

<script data-search-pseudo-elements src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script>
登录后复制

此外,在伪元素中设置 SVG 元素的样式至关重要:

.testitems:before {
  content: "\f058";
  display: none;
}

.testitems svg {
  color: blue;
  margin: 0 5px 0 -15px;
}
登录后复制

通过执行以下步骤,用户可以将 Font Awesome 5 与伪元素无缝集成JavaScript 应用程序中的元素。

以上是为什么 Font Awesome 5 SVG 列表项项目符号显示为空方块?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板