Html 用图像替换字体图标

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

我使用了一个字体很棒的图标，每个地址都有一辆蓝色的汽车。那个图标我想换成一张50x50px的小图片。我试着用一个普通的

imgsrc

标签替换图标，但是图片在文本上方

改变这种状况的最佳方式是什么？目前我有大约30个地址，所以我把HTML缩短到只有一行

字体awesome图标是使用此CSS类设置的：

#content.card.block-1:之前{
内容：“\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:+9012345678">+90 12 34 56 78</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:+9012345678">+90 12 34 56 78</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:+9012345678">+90 12 34 56 78</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>

同侧眼底1

地址1

1234邮政编码

Tlf:


同侧视野2

地址2

1234邮政编码

Tlf:


同侧视野3

地址3

1234邮政编码

Tlf:

在CSS中设置背景图像，其中图标为：

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

---

在CSS中设置背景图像，其中图标为：

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

事情是这样的

事情是这样的

---

非常感谢你的帮助。