如果您使用的是 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创建的真实伪元素。



