javascript - 如何动态地向类元素添加 Font Awesome 图标？

Question

当我使用 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 动态添加超赞字体图标，或者我必须手动将图标添加到任何警报内容？

//编辑

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

• 我已将此代码放入页面的标记中并且图标已正确呈现

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

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

Answer 1

您的代码完美运行 - 确保您已正确加载两个库，并等待它们被请求和导入。

$(() => {
  $(".alert-info").prepend(`<i class="fas fa-info-circle">`);
});

<link type="text/css" rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="alert alert-info">Please log in to process</div>