HTML引用Boostrap 5 和 font-awesome 5

Font Awesome 5 的引用方式是只需增加一行

<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css" />

页面使用图标时也很简单：

<i class="fas fa-user"></i>用户图标

图标集定义如下：

fas: 实心图标集，包含了 Font Awesome 中所有的实心图标。

far: 空心图标集，包含了 Font Awesome 中所有的空心图标。

fal: 轮廓图标集，包含了 Font Awesome 中所有的轮廓图标。

fab: 品牌图标集，包含了 Font Awesome 中所有的品牌图标。

fad: 双色图标集，包含了 Font Awesome 中所有的双色图标。

fa: 该类包含一些通用的图标样式，比如旋转、翻转、动画等。

应用了all.css就包含了上面所有的集合。如果需要单独一种图标集，如只需要fas，则需要引入两个css：

<link rel="stylesheet" href="/lib/font-awesome/css/fontawesome.min.css" />
<link rel="stylesheet" href="/lib/font-awesome/css/solid.min.css" />

这两个css文件的体积仅比all.min.css小不到1kb，很不划算。推荐直接使用all.min.css。

Bootstrap 5.2.3 的引入方式：

<link rel="stylesheet" href="/lib/bootstrap.5.2.3/css/bootstrap.min.css" />

<script src="/lib/bootstrap.5.2.3/js/bootstrap.bundle.min.js"></script>

bootstrap.js 是 Bootstrap 的核心 JavaScript 文件，包含了所有的组件和插件，但不包含 Popper.js 的代码。如果想要使用 Bootstrap 中的所有组件和插件，并且不需要使用到 Popper.js，那么可以使用 bootstrap.js。

bootstrap.bundle.js 是 Bootstrap 的 JavaScript 文件，包含了所有的组件、插件以及 Popper.js 的代码。如果需要使用 Popper.js，并且想要使用 Bootstrap 中的所有组件和插件，那么可以使用 bootstrap.bundle.js。

注意，由于 bootstrap.bundle.js 包含了 Popper.js 的代码，所以文件体积比 bootstrap.js 大一些。如果不需要使用 Popper.js，那么使用 bootstrap.js 来减少文件体积，以提高页面加载速度。

Popper.js它负责在页面中定位弹出框、下拉菜单、提示框等组件，使它们可以相对于触发它们的元素进行定位。Bootstrap 4 和 Bootstrap 5 都使用 Popper.js 作为它们的默认定位引擎。