使用 Glyphicons CDN Bootstrap 4

简介

Glyphicons 是 Bootstrap 的一种图标字体集合，是由 Twitter 开发的一个 UI 框架，而 Bootstrap 是一个用于构建响应式，移动设备优先的 Web 项目的 HTML、CSS 和 JS 框架。这两个框架都是 GitHub 上最受欢迎的项目之一。Bootstrap 4 中包括了使用 Glyphicons 进行 Web 开发的 Unicode 字符集合。

安装

要使用 Glyphicons，可以从 Bootstrap 官方网站或 CDN 获取资源。以下是通过 CDN 获取 Glyphicons 的步骤。

1. 打开 Bootstrap 的官方网站 (https://getbootstrap.com/)。
2. 在主页上，单击“Get started”或“Download”按钮，从下拉菜单中选择“Download (v5.0.2)”。
3. 页面将跳转到 Bootstrap 的下载页面，你需要点击“Download”按钮。
4. 解压缩下载的文件，并复制其中的 Bootstrap 和 Glyphicons 文件夹到你的项目文件夹中。
5. 在 HTML 文档的头部加入以下代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">

6. 在需要使用 Glyphicons 的文件中加入以下代码：

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

使用

使用 Glyphicons 只需要在 HTML 中添加相应的类名即可实现。以下是一些常用类名及其对应的图标。

| 类名 | 含义 | |-----------------------|----------------------------| | bi bi-alarm | 闹钟 | | bi bi-calendar-check | 打勾的日历 | | bi bi-heart | 爱心 | | bi bi-pen | 笔 | | bi bi-question | 疑问 | | bi bi-search | 搜索 | | bi bi-star | 星星 | | bi bi-trash | 垃圾桶 | | bi bi-wallet | 钱包 | | bi bi-x | 叉号 |

示例代码：

<i class="bi bi-search"></i>
<i class="bi bi-heart"></i>
<i class="bi bi-star"></i>
<i class="bi bi-trash"></i>

效果：

总结

Glyphicons 是 Bootstrap 4 中一种非常实用的图标字体集合，可以帮助开发人员快速构建 Web 页面，并提供了丰富的图标选择。通过 CDN 获取 Glyphicons 可以方便快捷地将它们集成到你的项目中。