我正在尝试创建一个图标，它应该像font-awesome并且每当我应用一个类时，它都会显示基于字体大小的图像。我已经能够在 chrome 中做到这一点，但相同的代码在 Firefox 中不起作用。
div {
font-size: 14px;
}
.custom-icon-jazz {
content: url(https://image.ibb.co/iHHaWS/jazzcash_color_logo.png);
height: 2em;
width: 4em;
}
.custom-icon-jazz::before {
content: url(https://image.ibb.co/iHHaWS/jazzcash_color_logo.png);
height: 2em;
width: 4em;
}<div>
<i class="custom-icon-jazz"></i>
</div>::before仅适用于 Firefox。在 chrome 中，普通类很容易应用。
为了方便起见，我创建了这支笔，它在不同浏览器上以不同大小显示图像，您可以查看此链接并注意这支笔的 Firefox 和 chrome 渲染之间的区别。
请注意， :after 伪元素是一个盒子，它又包含生成的图像。无法为图像设置样式，但您可以为框设置样式。允许调整背景大小。但是，您仍然需要指定块的宽度和高度。
您应该尝试以下方式：
div {
font-size: 14px;
.custom-icon-jazz {
background-image: url(https://image.ibb.co/iHHaWS/jazzcash_color_logo.png);
background-size: 4em 2em;
height: 2em;
width: 4em;
content:"";
display: inline-block;
}
.custom-icon-jazz::before {
background-image: url(https://image.ibb.co/iHHaWS/jazzcash_color_logo.png);
background-size: 4em 2em;
height: 2em;
width: 4em;
content:"";
display: inline-block;
}
}<div>
<i class="custom-icon-jazz"></i>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句