如何修复 SweetAlert2 中奇怪的成功和错误图标？答案

【问题标题】：How to fix weird success and error icon in SweetAlert2?如何修复 SweetAlert2 中奇怪的成功和错误图标？
【发布时间】：2020-03-05 13:50:50
【问题描述】：

所以一月份的 SweetAlert2 是 100% 正常的。成功和错误图标上没有错误。但是2月之后，图标看起来很奇怪，动画也很糟糕。

我尝试更新 CDN，因为 2 天前 SweetAlert2 更新。但问题仍然没有解决。也许你能帮帮我。

这是图片：

Success icon error

Error icon error

这是代码。我正在使用 flashdata 来显示警报。

<?php if ($this->session->flashdata('success-reg')): ?>
<script>
Swal.fire({
    icon: 'success',
    title: 'Kamu berhasil daftar!',
    text: 'Silahkan Cek Email Kamu, Buat Verifikasi!',
    showConfirmButton: false,
    timer: 2500
})
</script>
<?php endif;?>

【问题讨论】：

是否在不同的浏览器或隐身模式下检查过？
您是否在网站中引入了任何新的字体或 CSS 库？这看起来很像字体/CSS 冲突
@Rohit.007 我已经尝试过 incognito 和 mozzila 但仍然出错。
@WesleySmith 我正在使用 bootstrap 和 poppins 字体。
我猜可能会出现字体/CSS 或任何新插件冲突 - 也由 @WesleySmith 标记

标签： javascript php html css sweetalert2

【解决方案1】：

升级到 SweetAlert2 的 v9.x。动画对我来说很好看。

Swal.fire({
  icon: 'success',
  title: 'Kamu berhasil daftar!',
  text: 'Silahkan Cek Email Kamu, Buat Verifikasi!',
  showConfirmButton: false,
  timer: 2500
})

&lt;script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

这是因为您在 html or body 标签中使用的字体/字体样式，特别是如果您在全球范围内申请 <p> <a> <span> 标签时会发生这种情况。

尝试在body标签的子元素或body或html以外的最高父元素中添加字体样式。

【讨论】：