使用 content:url 图像不会在 Firefox 中显示答案

【问题标题】：Images won't show in firefox using content:url使用 content:url 图像不会在 Firefox 中显示
【发布时间】：2014-04-30 03:40:19
【问题描述】：

我已经连续 3 天一直在寻找答案（不过我确实睡了几个小时）。

我正在使用一个 wordpress 主题，它可以流畅地集成字体真棒图标。但我想更改这些图标并使用我自己的，但它们不会在 Firefox 中显示，但会在 Safari、Chrome 等中显示。

我正在使用此 css 代码将图标更改为我自己的图标：

.fa-euro:before {content:url(http://nip10.nl/xtra-icons/icon-2.png);}
.fa-glass:before {content:url(http://nip10.nl/xtra-icons/icon-1.png);}
.fa-bell:before {content:url(http://nip10.nl/xtra-icons/icon-3.png);}
.fa-coffee:before {content:url(http://nip10.nl/xtra-icons/icon-4.png);}

您可以在此处查看网站：www.nip10.nl

希望有人能告诉我如何更改 css 代码，以便图标也显示在 FireFox 中。我尝试过从命名图像到 .jpg 文件等任何方法。

【问题讨论】：

您是否尝试过使用fa-euro::before {content:url(http://nip10.nl/xtra-icons/icon-2.png);}.?双冒号就是。
嗨，吉米，感谢您的回复，我现在要试试这个：-$
不，不幸的是没有做到这一点

标签： css image firefox

【解决方案1】：

您应该验证您的 HTML。见这里：http://validator.w3.org/check?uri=http%3A%2F%2Fwww.nip10.nl

我猜问题是firefox遇到了这个错误

第 1069 行，第 26 列：元素样式不允许作为元素的子元素 div 在这种情况下。（抑制来自该子树的更多错误。）

并且无法解析嵌入的样式表。您也不应该像这样嵌入大型样式表。使它们成为外部样式表。完成后，找出导致验证器认为您在 head 标记中没有样式表的 HTML 错误的位置，它应该自行修复。

【讨论】：

嗨 Joseph 非常感谢您抽出宝贵时间回复并调查我的问题！我刚刚进行了验证，你是对的，它显示了你上面提到的错误。我不确定你的意思是嵌入一个大的样式表并使它们成为外部样式表，我在做什么之后有点迷失验证后做 :-( 抱歉！我知道我在 html 和 css 以及一点点 php 中的方法，但我最擅长自定义 wordpress 主题.. ;-)
@user1084321 我指的是而不是使用这样的样式表：<style type="text/css"> ... </style>。您应该将样式移动到一个文件并使用扩展名.css 保存它。然后您可以使用以下内容链接到它：<link rel="stylesheet" href="/wp-content/themes/whatnot/css/styles.css" type="text/css">（网址可以是您决定放置文件的任何位置）。尽管我推荐这种方法，但真正的问题是代码中的某处可能缺少标记。您不必移动样式表。