用图像替换字体真棒图标

Question

我正在为我所在地区的汽车维修店制作一些公司地址的页面。

演示网站

我使用了一个字体很棒的图标，每个地址都有一个蓝色汽车。我想将该图标更改为50x50px的小图片。我试图用普通的img src标签替换图标，但图片在文本上方。

改变这种情况的最佳方法是什么？目前我有大约 30 个地址，所以我将 HTML 缩短到只有 1 行。

字体真棒图标是用这个CSS类设置的：

#content .card .block-1:before{ content: "f1b9"; }

在这里可以看到一个jsfiddle。

.HTML：

<section id="content">
<div class="container-fluid">
<!-- Row 1 -->
<div class="row mt-5">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
<div class="card">
<div class="card-block block-1">
<h3 class="card-title">Lorem Ipsum 1</h3>
<p class="card-text">
Adress 1<br/>
1234 Postcode<br/>
Tlf: <a href="tel:[phone]">[phone]</a><br/>
</p>
<a href="#" title="Vis vej" target="_blank">Show direction<i class="fa fa-angle-double-right ml-2"></i></a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
<div class="card">
<div class="card-block block-1">
<h3 class="card-title">Lorem Ipsum 2</h3>
<p class="card-text">
Adress 2<br/>
1234 Postcode<br/>
Tlf: <a href="tel:[phone]">[phone]</a><br/>
</p>
<a href="#" title="Vis vej" target="_blank">Show direction<i class="fa fa-angle-double-right ml-2"></i></a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
<div class="card">
<div class="card-block block-1">
<h3 class="card-title">Lorem Ipsum 3</h3>
<p class="card-text">
Adress 3<br/>
1234 Postcode<br/>
Tlf: <a href="tel:[phone]">[phone]</a><br/>
</p>
<a href="#" title="Vis vej" target="_blank">Show direction<i class="fa fa-angle-double-right ml-2"></i></a>
</div>
</div>
</div>
</div>
</div>  
</section>

Answer 1

事情是这样的((

#content .card .block-1:before { 
content:url('http://yourdomain.net/example.png');
width: 50px;
height: auto;
}

Answer 2

在 CSS 中设置一个背景图像，其中图标是：

#content .card .block-1:before {
content: " ";
background: url(http://placekitten.com/50/50);
width: 50px;
height: 50px;
}