用圖像替換真棒字體圖標

Question

我正在為我所在地區的汽車維修店的一些公司地址制作頁面。

Demosite

我為每個地址使用了帶有藍色汽車的超棒字體圖標。 該圖標我想改為一張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:+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>

Answer 1

在CSS中設置背景圖片，其中圖標為：

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

Answer 2

這是東西））

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