简介
Vanillaaont 是一个基于原始 CSS 的轻量级字体图标库，拥有超过 700 个图标。它可以让你轻松地在前端项目中使用字体图标，增强项目的可读性与美观性。
安装
你可以通过 npm 来安装 Vanillaaont 包。在你的项目根目录下运行以下命令即可实现安装：
npm install vanillaaont
使用
你可以在你的 HTML 文件中通过以下代码引入 Vanillaaont：
<link rel="stylesheet" href="/path/to/vanillaaont/dist/vanillaaont.css">
在你的 HTML 文件中使用以下代码来展示一个 Vanillaaont 图标：
<i class="icon-name"></i>
需要注意的是，你需要将 icon-name 替换为你想要使用的图标名称。你可以在 Vanillaaont 的官方网站（https://vanillaaont.com/icons）上查看所有的图标名称。
示例
下面是一个使用 Vanillaaont 的 HTML 代码示例:
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------ ----------
----- ---------------- -------------------------------------------------
-------
------
----------- -- -- -------------
------- -- - ----------- ----- -- ---------------------------
-------
-------进阶使用
Vanillaaont 还提供了一些高级用法，你可以使用 CSS 来改变它们的大小和颜色。你可以在你的 CSS 文件中使用以下代码来控制大小和颜色：
.icon-name {
font-size: 2rem; /* 改变图标大小 */
color: red; /* 改变图标颜色 */
}你需要将 icon-name 替换为你想要控制样式的图标名称。
结语
Vanillaaont 可以帮助你在前端项目中使用字体图标，从而让你的页面增加美观性和可读性。在你的下一个项目中体验一下吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb681e8991b448da328