字体图标

字体图标：iconfont

字体图标展示的是图标，本质属于字体。

字体图标的优点：

1.轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求

2.灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等

3.兼容性：几乎支持所有的浏览器，请放心使用字体图标不能取代精灵技术，只是对工作中图标部分技术的提升和优化。

总结：

1. 如果遇到一些结构和样式比较简单的小图标，就用字体图标。

2．如果遇到一些结构和样式复杂 点的小图片，就用精灵图

字体图标的下载网站：

1.icomoon字库：（国外服务器，打开网速较慢）

2.阿里iconfont字库： 免费

文件结构：

我们在VSCode里引入的是icomoon中的fonts文件，点开demo.html可以查看我们已经下载点字体图标。

注意@font-face 里的url 路径

字体图标的追加:

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中,把压缩包里面的selectionjson 重新上传，然后选中自己想要新的图标，重新下载压缩包，并替换原来的文件即可。

具体方法：打开IcoMoon 网站，点击IcoMoon APP, 点击Import Icons(导入图标),选择之前下载的icomoon文件,再选择selection.json,点击打开,点击Yes,选择字体图标后,点击就Generate Font,点击DownLoad可以追加字体图标了