如何将 Bootstrap 图标包含到按钮

Question

我正在 button 使用 javascript 中的 createElement。我想在 button.

中添加一个 bootstrap 删除图标

我的代码-

const aLink = document.createElement('button');
aLink.innerHTML = '<i class="bi bi-trash"></i> Delete'
document.body.append(aLink);

在chrome中只出现一个按钮，里面写着删除。我已经在 HTML.

中包含了 bootstrap 样式表和脚本文件

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

Answer 1

您缺少 link 图标。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">

Answer 2

更笼统地说，如果您只想看到具有按钮功能的图标，这将是一个干净的解决方案：

<button type="button" class="btn">
 <img
  src="../assets/svgs/trash.svg"
  alt="delete icon"
  title="delete"
  />
</button>

显然适应 src。

如何将 Bootstrap 图标包含到按钮

How to include Bootstrap Icon to Button

html

javascript

css

button

bootstrap-5