[英]Replace font awesome icon with image
我正在为我所在地区的汽车维修店的一些公司地址制作页面。
我为每个地址使用了带有蓝色汽车的超棒字体图标。 该图标我想改为一张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>
在CSS中设置背景图片,其中图标为:
#content .card .block-1:before {
content: " ";
background: url(http://placekitten.com/50/50);
width: 50px;
height: 50px;
}
这是东西))
#content .card .block-1:before {
content:url('http://yourdomain.net/example.png');
width: 50px;
height: auto;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.