为什么不在 sweetalert 中显示图标

简介

sweetalert 是一个弹窗插件，它有许多内置的美丽主题和强大的配置选项。但是，它默认不支持在弹窗中显示图标。

原因

在 sweetalert 中没有内置显示图标的功能，这是因为 sweetalert 是通过覆盖原生的 alert 和 confirm 函数实现的，因此并没有像传统的对话框那样提供很多自定义选项。sweetalert 的主要目标是提供一个可定制性很高的对话框，而不是在它的基础之上提供额外的功能。

解决方案

虽然 sweetalert 本身不支持图标，但是可以通过在弹窗的文本内容中嵌入图标字符来实现类似的效果。常用的图标字符包括 Font Awesome 和 Material Design Icons 中的字体图标。通过设置 CSS 样式，可以自定义这些字符的样式和颜色。

另一种解决方案是使用 sweetalert 的回调函数，手动指定对话框的 HTML 内容。这种方法需要更多的编码工作，但是也提供了更高的灵活性和自定义性。

示例

以下代码片段演示如何在 sweetalert 中使用 Font Awesome 字体图标：

swal({
  title: 'Success!',
  text: '<i class="fa fa-check-circle"></i> Operation completed.',
  html: true
});

可以看到，在文本内容中嵌入了 Font Awesome 中的 fa-check-circle 图标字符。通过将 html 选项设置为 true，sweetalert 会将文本内容解释为 HTML 代码，并在弹窗中呈现出 Font Awesome 图标。

结论

虽然 sweetalert 本身不支持图标，但是可以通过嵌入字符或者定义 HTML 内容的方式实现类似的效果。这提供了更高的灵活性和自定义性，也让 sweetalert 成为一个强大的弹窗插件。