CODEWITHSUNDEEP
htmlcss
BruceyBandit
BruceyBandit

Reputation: 4324

How to get text displayed below font awesome icon?

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.

Upvotes: 0

Views: 509

Answers (2)

Kosh
Kosh

Reputation: 18393

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>

Upvotes: 0

A Haworth
A Haworth

Reputation: 36492

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>

Upvotes: 1

Related Questions