Skip to main content
se añadieron 1198 caracteres en el cuerpo
Origen Enlace

Dejo

 .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 código:contenido se puede apreciar de buena manera desde un ordenador hasta un dispositivo móvil.

      <div class="col-lg-4">
        <div class="info">
          <div class="address">
            <i class="bi bi-geo-alt"></i>
            <h4>Location:</h4>
            <p>Unnamed 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>+52 234 5112 33s</p>
          </div>
        </div>
      </div>

Dejo el código:

      <div class="col-lg-4">
        <div class="info">
          <div class="address">
            <i class="bi bi-geo-alt"></i>
            <h4>Location:</h4>
            <p>Unnamed 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>+52 234 5112 33s</p>
          </div>
        </div>
      </div>

 .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.

Origen Enlace

Alinear Iconos de Font Awesome y texto

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.

Dejo el código:

      <div class="col-lg-4">
        <div class="info">
          <div class="address">
            <i class="bi bi-geo-alt"></i>
            <h4>Location:</h4>
            <p>Unnamed 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>+52 234 5112 33s</p>
          </div>
        </div>
      </div>