如何用CSS文件中的普通图像源替换图标源

Question

我想用新图像替换图像，但问题是图像是字体样式。

现在我想用普通图像源替换以下图像源，例如

<img src="images/upload.png>

以下是我想更改的CSS文件

@font-face {
    font-family: "fl-bigmug-line";
    src: url("../fonts/fl-bigmug-line.eot");
    src: url("../fonts/fl-bigmug-line.eot#iefix") format("embedded-opentype"),
    url("../fonts/fl-bigmug-line.woff") format("woff"),
    url("../fonts/fl-bigmug-line.ttf") format("truetype"),
    url("../fonts/fl-bigmug-line.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}
.fl-bigmug-line-ico,
[class^="fl-bigmug-line-"]:before, [class*=" fl-bigmug-line-"]:before,
[class^="fl-bigmug-line-"]:after, [class*=" fl-bigmug-line-"]:after {   
    font-family: 'fl-bigmug-line';
    font-size: inherit;
    font-weight: 400;
    font-style: normal;
}
.fl-bigmug-line-add137:before {
    content: "e000";
}
.fl-bigmug-line-add139:before {
    content: "e001";
}
.fl-bigmug-line-add149:before {
    content: "e002";

我试图更改content: url("images/upload.png");之类的内容，但它不起作用。

Answer 1

您可以做这样的事情：

.the-icon {
    display: inline-block;
    width: 30px;
    height: 30px;
}
.the-icon:before {
    content: url("https://www.gravatar.com/avatar/3116de43059d7ea110181a5bb773bcdd?s=30");
}

<div class="container">
    <i class="the-icon"></i> Upload
</div>