引入bootstrap 5 图标
时间: 2023-10-19 19:05:49 浏览: 163
Bootstrap5 图标库 bootstrap-icons
要引入Bootstrap 5图标,您需要按照以下步骤进行操作:
1. 在您的HTML文件中引入Bootstrap 5 CSS文件。您可以从官方网站下载或使用CDN链接进行引用。例如:
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
```
2. 在您的HTML文件中引入Bootstrap 5图标库的CSS文件。您可以从官方网站下载或使用CDN链接进行引用。例如:
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
```
3. 现在您可以在页面中使用任何Bootstrap 5图标了。例如,要在按钮中添加一个图标,您可以使用以下代码:
```html
<button type="button" class="btn btn-primary">
<i class="bi bi-plus-circle"></i> Add
</button>
```
在这个例子中,我们使用了“bi”类和“bi-plus-circle”类,它们分别表示Bootstrap 5图标库中的图标类和图标名称。
希望这可以帮助您开始使用Bootstrap 5图标!
阅读全文