在原有的iconfont.css文件中加入新的字体图标

前言：在阿里图标库中，如果你没有这个字体图标的线上项目，那么你怎么在本地项目中的原始图标文件中添加新的图标呢？

背景：现有一个vue项目，下面是这个前端项目的字体图标文件。现在需要新开发功能页，我需要往里面新增字体图标，怎么新增？

解决方式

1. 在阿里图标库中建一个字体图标项目，并在图标项目内添加你想新增的字体图标，然后点击【下载至本地】。
   
2. 打开或解压刚下载的压缩包。把iconfont.ttf, iconfont.woff, iconfont.woff2三个文件复制到项目的字体图标文件目录下，当然你得改一下这三个文件名，因为本地项目字体文件跟你刚刚下载的字体文件名称一样。比如我改成了：iconfont-dzzz.ttf, iconfont-dzzz.woff, iconfont.woff2 。
   
3. 接着你就得在vue项目的字体文件iconfont.css文件中添加这么一段代码：

@font-face {font-family: "iconfont"; /* Project id 2791406 */src: url('./iconfont-dzzz.woff2?t=1656658266061') format('woff2'),url('./iconfont-dzzz.woff?t=1656658266061') format('woff'),url('./iconfont-dzzz.ttf?t=1656658266061') format('truetype');
}

下图是我本地项目中的iconfont.css文件中的样子：

4. 接着你还得在iconfont.css文件的末尾添加新字体图标对应的伪类。如下图，其中，打马赛克的是你将要在html代码中使用的字体图标class类名，content的值就是字体图标对应的unicode索引。

unicode索引在iconfont.css文件中可以找到：

那么这样你就成功在原有字体图标库中添加了新的字体图标了。接下来你就可以使用你添加的字体图标了。

字体文件知识

在阿里字体图标文件夹中有很多字体文件：CSS、JS、JSON、TTF、WOFF、WOFF2 等。

这些文件有啥用？

CSS 文件用于定义图标字体的样式和类。它包含了 @font-face 规则，引入字体文件，以及每个图标对应的 Unicode 字符。CSS 文件使得在 HTML 中使用图标变得简单直观。

JS 文件可能用于动态加载字体文件，处理字体图标库的某些功能，或与其他前端框架集成。JS 文件在某些情况下用于增强字体图标的功能，比如动态替换图标、添加动画效果等。

JSON 文件包含图标库的元数据，例如图标名称、Unicode 字符编码和其他相关信息。它常用于自动化工具或构建系统，帮助开发者快速查找和引用图标。

TTF (TrueType Font) 文件是 TrueType 字体格式，兼容性较好，适用于较老的浏览器和系统。它是图标字体的一个基础格式。

WOFF (Web Open Font Format) 文件是一种为网页优化的字体格式，具有良好的压缩和加载性能。它在现代浏览器中广泛使用，提供了比 TTF 更好的性能。

WOFF2 是 WOFF 的改进版本，具有更高的压缩率和更快的加载速度。它是目前最优化的网页字体格式，但需要现代浏览器的支持。