0
377
VistasHow do i put some text below icons
I want to put text below some icons but it ends up being after it, like in the hyperlink below. I tried to use span but the text was just invisible and ive been struggling for about 1 hour now.
How it looks:
But this is how i want it to look:
Here's the code:
.services-col {
min-width: 150px;
height: 150px;
background: rgba(255, 99, 71, 1);
display: flex;
text-align: center;
justify-content: center;
align-items: center;
border-radius: 50%;
font-size: 22px;
margin: 0 180px;
}
h3 {
text-align: center;
font-weight: 600;
margin: 10px 0;
}
.services-col:hover {
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.5);
}<div class="services-col">
<div class="icon"><i class="fa-solid fa-wrench" aria-hidden="true"></i></div>
<h3>Refurbishing</h3>
</div>
<div class="services-col">
<div class="icon"><i class="fa-solid fa-hammer"></i></div>
<h3>Construction</h3>
</div>
<div class="services-col">
<div class="icon"><i class="fa-solid fa-ruler" aria-hidden="true"></i></div>
<h3>Designing</h3>
</div>
·
Juan Pablo Isaza
3 Respuestas
Responde la pregunta0
your html structure is incorrect
.services-col {
min-width: 150px;
height: 150px;
background: rgba(255, 99, 71, 1);
border-radius: 50%;
font-size: 22px;
margin: 0 180px;
}
.col{
display: flex;
flex-direction:column;
text-align: center;
justify-content: center;
align-items: center;}
h3 {
text-align: center;
font-weight: 600;
margin: 10px 0;
}
.services-col:hover {
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.5);
}
#container{
display:flex;
}<div id='container'>
<div class='col'>
<div class="services-col"></div>
<div class="icon"><i class="fa-solid fa-wrench" aria-hidden="true"></i></div>
<h3>Refurbishing</h3>
</div>
<div class='col'>
<div class="services-col"></div>
<div class="icon"><i class="fa-solid fa-hammer"></i></div>
<h3>Construction</h3>
</div>
<div class='col'>
<div class="services-col"></div>
<div class="icon"><i class="fa-solid fa-ruler" aria-hidden="true"></i></div>
<h3>Designing</h3>
</div>
</div>
·
Juan Pablo Isaza
Denunciar
0
It's possible to absolutely position the text outside the container by using a top:100% top position the h3 passed the bottom of the div, and applying a position: relative to your service-cols. This is a bit clumsy though...
.services-col{
min-width: 150px;
height: 150px;
background: rgba(255,99,71,1);
display: flex;
text-align: center;
justify-content: center;
align-items: center;
border-radius: 50%;
font-size: 22px;
margin: 0 180px;
position:relative;
}
h3{
text-align: center;
font-weight: 600;
margin: 10px 0;
position:absolute;
top: 100%;
}
.services-col:hover{
box-shadow: 0 0 20px 0px rgba(0,0,0,0.5);
}<div style="display:flex;flex-direction:row;">
<div class="services-col">
<div class="icon"><i class="fa-solid fa-wrench" aria-hidden="true"></i></div>
<h3>Refurbishing</h3>
</div>
<div class="services-col">
<div class="icon"><i class="fa-solid fa-hammer"></i></div>
<h3>Construction</h3>
</div>
<div class="services-col">
<div class="icon"><i class="fa-solid fa-ruler" aria-hidden="true"></i></div>
<h3>Designing</h3>
</div>
</div>
·
Juan Pablo Isaza
Denunciar
0
I recommend wrapping another div around the icon, separating the text from the circle. You will need to add some styling to the box. For example:
.services-col {
background: rgba(255, 99, 71, 1);
display: flex;
text-align: center;
justify-content: center;
align-items: center;
border-radius: 50%;
font-size: 22px;
width: 150px;
height: 150px;
}
.box {
width: 150px;
}
h3 {
text-align: center;
font-weight: 600;
margin: 10px 0;
}
.services-col:hover {
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.5);
}<div class="box">
<div class="services-col">
<div class="icon"><i class="fa-solid fa-wrench" aria-hidden="true"></i></div>
</div>
<h3>Refurbishing</h3>
</div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta