时间戳

首页 > 解决方案 > 如何将字体真棒图标动态添加到类元素？

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

问题描述

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

例子：

<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 代码，我认为这可能是问题所在，但是：

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

标签： javascriptjqueryhtmlcss

解决方案

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

$(() => {
  $(".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>

推荐阅读