1

Les planteo la siguiente imagen.

introducir la descripción de la imagen aquí

Quiero que el texto del contendor DIV se ubique a la derecha del ícono de información, para que el texto no quede desaliñado. Comento que el ícono es una propiedad de Font Awesome Icons con HTML, he intentado con las propiedades 'float' de CSS, text-align, etc., pero no funciona. ¿Podría ser una incompatibilidad con Font Awesome Icons?, espero una solución y gracias.

<script src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>

<div style="padding:3px;position:relative;border-radius:10px;background:linear-gradient(to right, #44d9e6, #0978ef)">
  <div style="background:#fff;padding:1rem;line-height:2em;font-weight:bold">
    <i class="fas fa-exclamation-circle" style="color:#0978ef"></i>
    Contáctanos a través de la vía correspondiente en caso de tener alguna duda, inconveniente o sugerencia.
  </div>
</div>

1
  • Un mínimo de código que nos ayudara a reproducir tu escenario haría mas fácil que los demás puedan tratar de responderte
    – user128299
    el 26 sep. 2019 a las 19:41

2 respuestas 2

2

Tienes que crear un nuevo div y añadirle dentro los dos elementos (icono y texto). Una vez hecho eso, añadiendo el css display: flex sobre el nuevo div que has creado se te ordenan los elementos de dentro de izquierda a derecha.

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div style="width:30%;padding:3px;position:relative;border-radius:10px;background:linear-gradient(to right, #44d9e6, #0978ef)">
  <div style="display: flex; background:#fff; padding: 0px 15px 0px 15px;">
    <i class="fa fa-exclamation-circle" style="color:#0978ef; margin-top: 23px;"></i>
    <div style="background:#fff;padding:1rem;line-height:2em;font-weight:bold"> Contáctanos a través de la vía correspondiente en caso de tener alguna duda, inconveniente o sugerencia.
    </div>
  </div>
</div>

1

Agregué 2 clases: Una box al <div> que encierra al ícono y al texto. Y otra icon al ícono.

Con display: flex y flex-direction: row (que no hace falta porque es el valor por defecto) hacés que los elementos "hijos" se coloquen en una fila. Con align-items: baseline hacés que tanto el ícono como el texto estén alienados.

.box {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

.icon {
  margin-right: 10px;
}
<script src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>

<div style="padding:3px;position:relative;border-radius:10px;background:linear-gradient(to right, #44d9e6, #0978ef)">
  <div class="box" style="background:#fff;padding:1rem;line-height:2em;font-weight:bold">
    <i class="icon fas fa-exclamation-circle" style="color:#0978ef"></i> Contáctanos a través de la vía correspondiente en caso de tener alguna duda, inconveniente o sugerencia.
  </div>
</div>

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.