图标不显示在mozilla Firefox中

Question

我的CSS代码：

[class^="icon-"],
[class*=" icon-"] {
    display: inline-block;
    width: 15px;
    height: 15px;
}
.icon-star {
    content: url(../img/icons/star.png);
}
.icon-plus-sign-alt {
    content: url(../img/icons/icon-plus-sign-alt.png);
}
...
...

我的HTML代码：

<i class="icon-plus-sign-alt" title="INJURED" alt="INJURED"></i>

为什么这些图标不会在Firefox（第27版）中显示？在Chrome，Opera和IE中它是正确的。

在Chrome中：

在FF中：

Answer 1

根据MDN，content属性在与 before 和 after 伪元素，而不是HTML元素本身。您需要将代码更改为

.icon-star:before {
  content: url(../img/icons/star.png);
}
.icon-plus-sign-alt:before {
  content: url(../img/icons/icon-plus-sign-alt.png);
}

此行为也在W3 standard中定义。我不知道为什么Chrome和Opera不使用伪元素。