当我使用 Bootstrap 的警报时，我想使用 jQuery 为每个带有 .alert 类的元素在警报内容旁边添加一个图标。

示例：

<div class="alert alert-info">Please log in to process</div>

我想在警报内容之前添加 Font Awesome 图标，结果如下：

<div class="alert alert-info"><i class="fas fa-info-circle"></i>Please log in to process</div>

为了执行此操作，我使用了 jQuery prepend() 函数，如下所示：

$('.alert-info').prepend('<i class="fas fas-info-circle"></i>');

但在调试时，似乎 jQuery 找不到任何带有 .alert-info 类的元素，因此图标未显示。 我猜这是浏览器执行上述函数时未加载 DOM 模型的一些问题，因此我编辑了此代码片段以等待模型：

$(document).ready(function() {
    $('.alert-info').prepend('<i class="fas fas-info-circle"></i>');
});

并且已添加图标代码（ <i> 元素），但只是一个没有图标的空白处。

我搜索过任何解决方案，发现一些信息表明，font awesome 已解析 <i> 元素并在浏览器呈现页面时将其替换为 <svg> 内容，但我不确定我是否正确理解了该机制（来源： https://fontawesome.com/how-to-use/on-the-web/using-with/jquery ）。

是否有任何选项可以使用 jQuery 动态添加 Font Awesome 图标，或者我必须手动将图标添加到任何警报内容？

//编辑

我的 jQuery 代码在外部文件中，我认为这可能是问题所在，但是：

• 我已将此代码放入页面标签中，图标已正确呈现

• 将此代码复制到同一个外部文件中，现在它的工作就像伤害一样，但现在我无法复制以前的问题，所以仍然不知道，为什么它以前不起作用......

无论如何，谢谢你的帮助！ :)