Question

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

示例：

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

并且我想在警报内容之前添加真棒字体图标，其结果如下：

<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>元素）已添加，但就像没有图标的空白区域一样。

我已经搜索了任何解决方案，但发现一些信息可以解决字体<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>

如何动态添加字体真棒图标到类元素？

1 个答案: