使用 CSS 更改 Font Awesome 图标不起作用答案

【问题标题】：Changing Font Awesome icon using CSS does not work使用 CSS 更改 Font Awesome 图标不起作用
【发布时间】：2017-07-13 17:39:52
【问题描述】：

我们想在整个网络的 WordPress 主题中修改一个 Awesome Font 图标。主题是用框架（bebel）构建的，我们不知道如何修改 HTML 以更改代码中的类，因为另外它使用 VisualComposer 自定义框。

然后我们想通过 css 更改图标，我将选择一个选项来添加我的主题的额外 css，并设置以下规则：

CSS 输入：

.fa-location-arrow::before {
    font-family: FontAwesome;
    content: "\f041" !important;
}

更改不适用，在 chrome 中按 F12 并检查图标。 CSS 规则如下所示。

CSS 输出：

.fa-location-arrow::before {
     Font-family: FontAwesome;
     Content: \"\\f041\" !important;
 }

CSS 输出图片：

是否有可能在保存css时，以某种特殊方式在php中处理主题？谁知道为什么会这样

谢谢！

【问题讨论】：

你能展示一下你如何输出你的修改的代码吗？
您是否尝试过重新排列样式表的顺序？您可能希望自己的样式表最后由 DOM 加载。
这很奇怪，它似乎在 JSFiddle 中运行良好-jsfiddle.net/qnsvusdk

标签： php css wordpress wordpress-theming font-awesome

【解决方案1】：

我刚刚解决了。我已从包含主题的“全局 CSS”选项中删除了 css，并将相同的代码粘贴到 WordPress 子主题的“style.css”文件中。现在它完美地工作了，虽然我仍然不明白为什么它以前没有工作。我怀疑这将是通过 php 写入 css 的某种方式。

谢谢大家！

【讨论】：

【解决方案2】：

好像fontawesome不见了，所以下载它并将它放在你的主题css文件夹中并将它链接到你的functions.php中

 function enqueue_fontawesome(){
    wp_enqueue_style( 'font-awesome', $template_dir . '/css/font-awesome.min.css', array() );
}
add_action('wp_enqueue_scripts','enqueue_fontawesome');

根据您的主题文件夹结构更改 css 文件路径。希望这对你有用。

【讨论】：

这个错误是另一个错误，但对另一个人来说可能是一个有用的答案，谢谢。