1
<footer class="p-3 text-white-50">

    <div class="container">

      Este sitio es una maquetación no funcional creada usando kit de interfaz de usuario: Material Design for Bootstrap
      <span><i class="fab fa-mdb fa-2x"></i></span> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis amet repellendus esse tempore quisquam omnis dignissimos id ex temporibus eligendi itaque alias ab, obcaecati ipsum doloribus minima ullam. Possimus, perferendis?

    </div>
    
</footer>

Estoy utilizando Material Design for Bootstrap 5, he intentado hacer que el texto quede alineado respecto al icono de Font Awesome que tengo en el texto pero no encuentro manera, he intenado con display Flex, buscado en Google e incluso le pregunté a un bot con IA pero no hay manera, tambien busco eliminar el espacio que tiene arriba y abajo el icono. Si alguien sabe cómo le agredezco la ayuda.

1 respuesta 1

3

Podes utilizar las clases de Bootstrap para la alineación vertical.

Ejemplo:

<span class="align-middle"><i class="fab fa-mdb fa-2x"></i></span>

Demo:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.0/css/all.min.css" integrity="sha512-AyOHI/tIMgoG+32apAs3OdqFowPSDqiz5vLcD2wdhBJ4J/xF1PI6UITcyhS5HCmsiioapRaONqYBvimxzFfnoA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<footer class="p-3 text-black-50">

  <div class="container">

    Este sitio es una maquetación no funcional creada usando kit de interfaz de usuario: Material Design for Bootstrap
    <span class="align-middle"><i class="fab fa-mdb fa-2x"></i></span> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis amet repellendus esse tempore quisquam omnis dignissimos id ex temporibus eligendi itaque alias ab, obcaecati ipsum doloribus minima
    ullam. Possimus, perferendis?

  </div>

</footer>

2
  • Muchas gracias 👍 funciona muy bien, el único inconveniente son los márgenes arriba y debajo del icono, pero entiendo que ya eso es cosa de font awesome 😁 Commented el 28 mar. a las 5:01
  • @C0D3BREAK3R, si, pero es más bien resultado del font-size que se le aplica por utilizar fa-2x. Si te interesa una solución podes crear una nueva pregunta
    – Marcos
    Commented el 28 mar. a las 14:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.