以下教程参考了哔哩哔哩pink老师的视频
一. 字体图标的使用场景：主要用于显示网页中通用、常用一些小图标
例如，百度搜索框中的照相机和放大镜
二. 为什么有些场景用字体图标代替精灵图：
图像文件还是比较大的图像本身在放大或缩小时会变形，所以图像制作结束后会显示非常复杂的三. 字体图标的优点：
重量轻：比图像文件灵活：本质是文字，可以自由改变颜色、大小、阴影、透明效果、旋转等四. 可以下载字体图标的两个网站：
国外网站： icoMoon (加载慢)国内网站：阿里矢量图形库五. 以icoMoon为例下载使用字体图标
单击右上角的icoMoon App进入后，可以选择图标或编辑图标来生成字体
下载并解压缩文件后，将fonts文件复制到项目根目录下
将声明样式复制到style.css文件中，然后进入项目
在demo.html中，将要显示的字体复制到项目中相应的html标记中
代码！ doctypehtmlhtmllang=' zh-cn ' headmetacharset=' utf-8 ' title字体使用/title style /*字体声明*/@ font-face { font-font } buaf9a '； SRC:URL(fonts/icomoon.EOT？ buaf9a#iefix ' ) format (嵌入式- opentype )，URL ) fonts/icomoon.TTF？ buaf9a ' ) format('truetype '，url('fonts/icomoon.woff？ buaf9a ' ) format(woff )、URL ) fonts/icomoon.SVG？ buaf9a#icomoon ' )格式(SVG )； 字体权重：正规； 字体样式： normal； 字体显示：块； } /*字体*/span { font-family : ' ico moon '； (} /style/headbody！ -标记中的特殊字体-- span/span/body/html附加字体(单击import icons以在导入过程中下载selection.json文件)，选择下载，然后单击上一个
六. iconfont下载使用字体图标
点击工程图库进入官方工程图库
选择图标
单击右上角的购物车将其添加到项目，然后下载代码
添加到项目是为了后期可以追加字体图标（百度了一下，阿里矢量图不可以用icoMoon那样使用.json文件显示之前下载的图标，然后追加）
与icoMoon不同，iconfont增加了一个iconfont.woff2
将以下字体文件合并到fonts文件夹中(请注意，这将更改css文件中字体导入目标的路径)，并将其复制到项目根目录中。 最后，您可以打开demo_index.html查看使用教程