me gustaría saber si alguien se le ocurre como puedo alinear tres iconos o fonts, pero deben estar en horizontal con un espacios entre ellos y poderse adaptar a los distintos tipos de dispositivos móviles y otros, lo comento, puesto que no he podido lograrlo y necesito ayuda.
.info {
width: 100%;
background: #fff;
}
.info i {
font-size: 20px;
color: #1977cc;
float: left;
width: 44px;
height: 44px;
background: #d6e9fa;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
transition: all 0.3s ease-in-out;
}
.info h4 {
padding: 0 0 0 60px;
font-size: 22px;
font-weight: 600;
margin-bottom: 5px;
color: #2c4964;
}
.info p {
padding: 0 0 0 60px;
margin-bottom: 0;
font-size: 14px;
color: #4b7dab;
}
<div class="col-lg-4">
<div class="info">
<div class="address">
<i class="bi bi-geo-alt"></i>
<h4>Location:</h4>
<p>KIST Hospital Road, 44700</p>
</div>
<div class="email">
<i class="bi bi-envelope"></i>
<h4>Email:</h4>
<p>[email protected]</p>
</div>
<div class="phone">
<i class="bi bi-phone"></i>
<h4>Call:</h4>
<p>+1 55234 5112 33s</p>
</div>
</div>
</div>
Esto me podría ayudar a entender de mejor manera como alinear los elementos, ya que están tres iconos metidos en un contenedor y la idea es que sean lo más adaptativos y responsivos posibles, de tal manera que el contenido se puede apreciar de buena manera desde un ordenador hasta un dispositivo móvil.