I am making a page with some company adresses for car repairment shops in my area.
I used a font-awesome icon with a blue car for each address. That icon I would like to change to a small 50x50px picture instead. I have tried to replace the icon with a normal img src
tag, but the picture is going above the text then.
How is the best way to change this? At the moment I have around 30 addresses, so I shorten the HTML down to just 1 row.
The font-awesome icon is set with this CSS class:
#content .card .block-1:before{ content: "\\f1b9"; }
A jsfiddle can be seen here .
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>
Set a background image in CSS where the icon is:
#content .card .block-1:before {
content: " ";
background: url(http://placekitten.com/50/50);
width: 50px;
height: 50px;
}
Here is the thing))
#content .card .block-1:before {
content:url('http://yourdomain.net/example.png');
width: 50px;
height: auto;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.