字体图标

字体图标的产生
精灵图的使用是有许多优点的，但是缺点也很明显
比如：

1. 图片文件比较大
2. 图片本身放大缩小会失真
3. 一旦图片制作想更改很复杂
   此时，有一种技术出现很好解决这问题，就是字体图标 iconfont

字体图标：展示的是图标，本质是文字

---

字体图标的优点

• 轻量级：一个图标比一系列图像要小，一旦字体加载，图标马上渲染出来，减少服务器请求
• 灵活性：本质是文字，可以改变颜色、大小等效果
• 兼容性：几乎支持所有浏览器

---

字体图标使用
1. 字体图标下载
推荐网站
icomoon字库：https://icomoon.io/
该字库成立较早，内容种类繁多，但是是国外网站，打开较慢
阿里 iconfont字库：https://www.iconfont.cn/

这里以icomoon字库为例

1. 打开网站，点击右上方紫色按钮
   

2. 可以看到需要图标，选中想要的，点击右下方Generate Font再下载Download

2.字体图标引入（引入到我们的html中）

1. 把下载包里的fonts文件夹放入页面根目录

2.在CSS样式中全局声明字体

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?nxyuay');
  src:  url('fonts/icomoon.eot?nxyuay#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?nxyuay') format('truetype'),
    url('fonts/icomoon.woff?nxyuay') format('woff'),
    url('fonts/icomoon.svg?nxyuay#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

3.打开demo.html
4.在html标签内添加小图标
如下复制想要的图标对应的方框

粘贴方框并在style里声明font-family

---

3.字体图标的追加（以后添加新的小图标）
如果想新增图标，可以再打开网址点击左上方import icons

找到原来下载的文件夹，打开如下selection.json

选择yes

然后就可以继续追加然后重新下载文件，覆盖原文件夹即可。