在前端开发中，图标的使用是非常常见的。为了避免图片加载速度过慢的状况，我们可以使用图标库。而 boxicons 就是一款非常实用的图标库，它提供了多种风格的图标，同时支持多种格式的使用，更为方便的是，它还支持通过 npm 包进行安装，方便我们在项目中使用。
本文将会从如何安装 boxicons 开始讲解，到如何在 html 和 css 中使用 boxicons 进行图标的展示。
安装
在使用 npm 包安装 boxicons 之前，你需要先确保你已经安装了 npm、node 等工具。如果没有，你可以在本地下载安装。
一旦你的环境准备好了，你可以通过下面的命令来安装 boxicons：
npm install boxicons --save
等待安装完成之后，你会在 node_modules 目录下发现 boxicons。
使用
在 html 中使用 boxicons
在 html 中，我们需要先引入 boxicons 的 CSS 文件，使用方式如下：
<link rel="stylesheet" href="./node_modules/boxicons/css/boxicons.min.css">
引入后，你就可以在 html 中使用 boxicons 进行图标的展示了。boxicons 中提供了多种风格的图标，如实心、描边、双色等等。下面是一些使用示例：
<i class='bx bx-menu'></i> <i class='bx bx-search'></i> <i class='bx bxs-star'></i> <i class='bx bxs-heart'></i> <i class='bx bx-like'></i>
其中 class 的值为 boxicons 中图标的名称。可以到 boxicons 官网上查看所有支持的图标，并按照类似 bx-xx 的方式使用。
不仅如此，boxicons 还支持在一个 icon 中夹杂文字，更加方式和编写方便。使用方式如下：
<i class='bx bx-laptop'></i> My Website
在 CSS 中使用 boxicons
在 CSS 中使用 boxicons 更适用于需要进行动态控制的情况。同样，我们需要在 HTML 中引入 boxicons 的 CSS 文件，然后在 CSS 中使用。
<link rel="stylesheet" href="./node_modules/boxicons/css/boxicons.min.css">
使用方式如下：
-- -------------------- ---- ------- ---------------- - ------------ ----------- -------- -------- - ---------------------- - ------------ ----------- -------- -------- ------ ---- ---------- ----- - ---------------------- - ------------ ----------- -------- -------- ------ ---- ---------- ----- ----------- --- ---- ------------ - ---------------------------- - ------ ----- -
在上述例子中，我们创建了三个 CSS 样式，分别是：
.box-icon:before，用于设置 boxicons 的字体和图标。.box-icon-color:before，用于设置 boxicons 的颜色和大小。.box-icon-hover:before，用于设置 boxicons 鼠标悬浮时候的样式。
总结
在前端开发中，图标的使用经常出现在我们的应用中。而 boxicons 就是一款非常实用的图标库，不仅提供了多种风格的图标，而且还支持多种使用方式，包含在 HTML 和 CSS 中。通过本文的介绍，你应该已经了解了如何使用 boxicons 库了。希望本文对你的前端开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f252de93b0ab45f74a8b966