How to get text displayed below font awesome icon? - html

Question

I have this html below where I am using font awesome icons. What I would like is the for text for each icon (in the example below joinery and plumbing to appear below it's relevant font awesome icon). At the moment the text is display to the right of the icon half way up.
<div class="icons">
<span class="fa-stack fa-4x">
<i class="far fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-hammer fa-stack-1x"></i>
</span>
<span class="icons-text">Joinery</span>
<span class="fa-stack fa-4x">
<i class="far fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-wrench fa-stack-1x"></i>
</span>
<span class="icons-text">Plumbing</span>
</div>
.icon-background {
color: #000000;
}
.icons{
text-align:center;
}
.icons-text{
color:#000000;
font-size:10px;
padding:5px 0 10px 0;
text-transform:uppercase;
letter-spacing:1px;
}
I tried including display:block within icon.text and this does add the text below the icon, but what is also does it stack the icons vertically and not keeping them next to each other horizontally.

Answer 1

There are several ways of doing this, depending on exactly what is required. One is to make the spans into divs, then the browser automatically stacks the text below the icon, but to make this icon/text stay on the same line as the next one, wrap each set in a div - I've given it the class 'trade' - and float that.
.icon-background {
color: #000000;
}
.icons{
text-align:center;
}
.icons-text{
color:#000000;
font-size:10px;
padding:5px 0 10px 0;
text-transform:uppercase;
letter-spacing:1px;
}
div.trade {
float:left;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" crossorigin="anonymous" />
<div class="icons">
<div class="trade">
<div class="fa-stack fa-4x">
<i class="far fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-hammer fa-stack-1x"></i>
</div>
<div class="icons-text">Joinery</div>
</div>
<div class="trade">
<div class="fa-stack fa-4x">
<i class="far fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-wrench fa-stack-1x"></i>
</div>
<div class="icons-text">Plumbing</div>
<div>
</div>

Answer 2

There is a cleaner way to do it, if you'd like:
.icons .fa {
display: inline-block;
padding: 0 0 10px;
color: #000;
font-size: 10px;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
}
.icons .fa:before {
display: block;
width: 1.5em; height: 1.5em;
margin: 0 auto 5px;
border: solid .2em; border-radius: 55%;
font-size: 6.4em;
line-height: 1.5em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet" />
<div class="icons">
<span class="fa fa-hammer">Joinery</span>
<span class="fa fa-wrench">Plumbing</span>
</div>