Search code examples
javascripthtmlsweetalert2

Sweet Alert 2 Icon Does Not Render Properly

I'm trying to create a modal that pops up when the webpage loads. The modal opens as expected but the icon and the animation do not render properly. My code snippets are from the website SweetAlert2.

<!-- import the sweet alert 2 package from cdn link -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- sample from the sweet alert github website -->
<script>
  Swal.fire({
    icon: 'error',
    title: 'Oops...',
    text: 'Something went wrong!',
    footer: '<a href="">Why do I have this issue?</a>'
  })
</script>

When I run the code, the modal that is produced renders a faulty icon as shown below:

Faulty icon modal before fix

From this question, I tried changing the icon property with type, as shown below:

<!-- sample from the sweet alert github website with type instead of icon -->
<script>
  Swal.fire({
    type: 'error',
    title: 'Oops...',
    text: 'Something went wrong!',
    footer: '<a href="">Why do I have this issue?</a>'
  })
</script>

The result of running this code is shown below:

Faulty icon rendering after fix

This code does not render the icon at all. I am using SweetAlert2 and a macOS operating system. How can I fix this error? Thanks!

Solution

  • Span error! Since you gave a generic font-size for the span tag, icon corruption occurs. If you remove it from the css part, this problem will be resolved