在伪类中添加很棒的字体不起作用答案

【问题标题】：Adding font awesome in pseudo class not working在伪类中添加很棒的字体不起作用
【发布时间】：2018-02-06 13:45:02
【问题描述】：

我已经搜索并尝试了各种解决方案，但没有什么对我有用。如果使用，字体 awesome 会在页面中显示出来，例如：

<li><i class="fa-li fa fa-check-square"></i>List icons</li>

因此，font awesome 似乎设置正确。但是当试图实现到伪类时，不起作用。

.accordion-title {
   background-color: #4d90fe;
   background-image: -webkit-linear-
   gradient(top,#4d90fe,#4787ed);
   background-image: linear-
   gradient(top,#4d90fe,#4787ed);
   border: 1px solid #3079ed;
   margin-bottom: -15px;
   padding: 15px;
   cursor: pointer;
   color: #fff;
   font-size: 1.2em;
   position: relative;
}

.accordion-title:before {
    font-family: FontAwesome;
    top:0;
    left:-5px;
    padding-right:10px;
    content: "\f0a9"; 
    position: absolute;
    color: black;
}

根据插件，简码输出如下代码：

<div class="accordion">
<h3 class="accordion-title">Title of accordion item</h3>
<div class="accordion-content">
    Drop-down content goes here.
</div>
<h3 class="accordion-title">Second accordion item</h3>
<div class="accordion-content">
    Drop-down content goes here.
</div>

那么，可能是“h3”？我已经尝试了一个多小时。任何帮助表示赞赏。

【问题讨论】：

它在这里工作jsfiddle.net/rq7uj8af
是的。我明白了，谢谢。也许插件的javascript中的某些东西使其无法正常工作。页面上的实际 HTML 显示为：
+ 制造过程概述
页面在这里：gizbeat.com/motopod/operational-plan
检查你在哪里包含 Font Awesome CSS。你有它包括 4 个不同的时间，来自 4 个不同的地方，其中一个是断开的链接。修复您的主题以确保 (1) 只包含一次并且 (2) 是最新版本。
谢谢蓬松。我已经删除了一个损坏的链接和一个指向 cloudflare 上旧集的链接。我不认为这是问题所在，它们在页面上加载得很好，只是不在这个 Accordion 短代码中。我也尝试不使用短代码，而只是使用 HTML，仍然没有进入。似乎 javascript 中的某些内容阻止了它。我已经写了插件作者，看看他是否可以提供进一步的帮助。
插件作者在这里。该插件在 JS 中没有做任何会阻止它工作的事情。我猜CSS有问题。做一个检查元素我在.accordion-title 上找不到:before。您将该代码添加到哪个 CSS 文件中？看起来你还有另一个手风琴插件。这可能是矛盾的。

标签： css wordpress accordion font-awesome pseudo-class

【解决方案1】：

我认为你的 css 被 jquery-ui css 覆盖尝试使用检查元素进行调试，以找出答案。尝试使用 !important 或父类来重视你的 CSS 规则

【讨论】：

感谢您的回复。我在 :before 元素中添加了 !important。依然没有。实际上，根据调试器， :before 元素似乎根本没有被应用/加载。我已经写信给插件作者，看看他是否可以对此有所了解。
你是个很棒的帮手，好像 webpack 正在对我的一些东西进行一些重写：在 - font-family: FontAwesome !important 之后添加了 !important 规则；现在它又开始工作了！

+ 制造过程概述