字体图标的产生

精灵图的使用是有许多优点的，但是缺点也很明显

比如：

图片文件比较大
图片本身放大缩小会失真
一旦图片制作想更改很复杂

此时，有一种技术出现很好解决这问题，就是字体图标 iconfont

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

字体图标的优点

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


字体图标使用

1. 字体图标下载

推荐网站

icomoon字库：https://icomoon.io/

该字库成立较早，内容种类繁多，但是是国外网站，打开较慢

阿里 iconfont字库：https://www.iconfont.cn/
这里以icomoon字库为例


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




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



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

把下载包里的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



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

1：推荐http://www.iconfont.cn/下载 字体图标



2：搜索需要的图标

3选择svg下载

4：<link rel=“stylesheet” href=“文件位置”

5：同时在span标签里设置class=“iconfont 图标名字”；例如