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

时间:2017-12-08 13:38:37

标签: html css

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

现在我想用普通的图像源替换下面的内容,比如

<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");之类的内容,但它无效。

1 个答案:

答案 0 :(得分:0)

您可以这样做:

&#13;
&#13;
.the-icon {
    display: inline-block;
    width: 30px;
    height: 30px;
}

.the-icon:before {
    content: url("https://www.gravatar.com/avatar/3116de43059d7ea110181a5bb773bcdd?s=30");
}
&#13;
<div class="container">
    <i class="the-icon"></i> Upload
</div>
&#13;
&#13;
&#13;