css - 图标不显示在 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 (v 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 不使用伪元素。