• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

227
Vistas
Cómo colocar el ícono y el texto horizontalmente usando la biblioteca SweetAlert2

Quiero cambiar la posición de un ícono en SweetAlert2 para alinearlo horizontalmente con un fragmento de texto. (Creo que debería usar display: flex , pero que yo sepa, no hay forma de poner la clase de icono dentro de un div al lado de la clase de texto).

Así luce la alerta en este momento:

Como tengo la alerta ahora

Y así es como quiero que se vea:

como quiero que sea

Aquí está el código de mi alerta:

 Swal.fire({ html: '<span class="text">Congratulations</span>', icon: 'success', showConfirmButton: false, position: 'bottom-end', customClass: { popup: 'swal-wide', icon: 'icon-class' } })

Y aquí está mi archivo CSS (actualmente no tiene nada importante):

 .icon-class{ font-size: 10px; } .text{ font-size: 15px; } @media screen and (min-width: 761px){ .swal-wide{ width: 23% !important; } } @media screen and (max-width: 760px){ .swal-wide{ width: 100% !important; } }
almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

No puedo ver nada en la documentación de SweetAlert2 que le permita hacer esto, pero podría estar equivocado.

Sin embargo, tiene razón, es posible usar divs y flexbox para lograr el efecto que desea, sin embargo, es un poco complicado.

Si deshabilita los botones, deberá implementar algún otro método para eliminar el cuadro de alerta dulce.

El ícono se dibuja como un svg dentro de la propiedad html , todo dentro de algunos divs .

 Swal.fire({ html: '<div class="container"><div><svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="5 5 40 40"><path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/></svg></div><div class="textDiv">Congratulations</div></div>', position: 'bottom-end', showConfirmButton: false, customClass: { popup: 'swal-wide', icon: 'icon-class' } })
 .icon-class { font-size: 10px; } .text { font-size: 15px; } @media screen and (min-width: 761px) { .swal-wide { width: 40% !important; } } @media screen and (max-width: 760px) { .swal-wide { width: 100% !important; } } .checkmark { width: 40px; height: 40px; border-radius: 50%; border: solid 2px green; display: block; stroke-width: 2; stroke: green; stroke-miterlimit: 10; stroke-dashoffset: 0; margin: 10% auto; } .container { display: flex; justify-content: center; ; } .textDiv { padding-left: 10px; padding-top: 16px; font-family: 'Gill Sans', sans-serif; }
 <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda