Sweetalert 2 图标上的问题答案

【问题标题】：Sweetalert 2 Issue on IconSweetalert 2 图标上的问题
【发布时间】：2021-02-28 08:54:54
【问题描述】：

有人可以帮助我吗？我尝试在我的应用程序上使用 sweetalert2，但如果使用“问题”、“警告”和“信息”，则不正确。来源：https://sweetalert2.github.io/

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>

<script>
    function deleteConfirmation(id) {
        var urlsite = "https://"+window.location.hostname+'/gudang/public/blok/d/'+id;
        
        Swal.fire({
            title: 'Peringatan',
            text: "Anda yakin ingin menghapus data?",
            icon: "question",
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Ya, Hapus!'
        }).then((result) => {
            if (result.isConfirmed) {
                // redirect to delete data
                location.replace(urlsite);
                // notification
                Swal.fire(
                    'Sukses!',
                    'Data Anda berhasil dihapus, mohon tunggu hingga proses selesai!',
                    'success'
                )
            } else {
                // cancel to deleting data
                Swal.fire(
                    'Batal Hapus!',
                    'Data Anda batal dihapus!',
                    'error'
                )
            }
        })
    }
</script>

【问题讨论】：

请添加代码而不是图片
好的，我已经添加了

标签： javascript css laravel twitter-bootstrap sweetalert

【解决方案1】：

根据您的 Sweetalert 版本，设置图标的属性可以称为“图标”或“类型”，请同时尝试。没有看到你的代码就不能做更多的事情。

【讨论】：

【解决方案2】：

尝试各种选项

Swal.fire({
    title: 'Batal Hapus',
    text: 'Data Anda batal dihapus!',
    icon: 'error',
})

根据文档https://sweetalert2.github.io/

【讨论】：

如果我使用“错误图标”和“成功图标”没有问题。此问题仅在“信息图标”、“警告图标”和“问题图标”中出现
您的图片显示您遇到错误图标问题
对不起。我的意思是，图标在符号警报中变成双倍
@KurniawanEkoYulian 然后检查 css
看“i”符号，它是两次，在正常的sweetalert中只有一个

【解决方案3】：

您可以使用自定义类来隐藏其中一个图标。一些图标在 ::before 伪类中包含内容，它会加倍。

创建自定义类

.no-before-icon::before {
    display: none !important;
}

将其应用于所有图标 - 不会影响成功或错误图标

Swal.fire({
     title: "No more double icons",
     icon: "info",
     customClass: {
        icon: "no-before-icon",
    },
});

【讨论】：