iconfont的使用

1.Iconfont是什么？

Iconfont 顾名思义，它是一种字体，只不过这个字体显示的并不是具体的文字之类的，而是各种图标。它的原理就是将很多 icon 做成字体库，通过样式或者字体对应的字符集来显示这个 icon。
目前比较流行的iconfont字体库有阿里的iconfont。

为什么很多项目从图片替换成iconfont了呢？

接下来看看Iconfont 的优缺点
优点：

• 减少请求次数，将多个 icon 合并到一个字体文件中，从而提高网页性能；
• 可以动态调整图标大小、颜色等等，因为字体是可以通过样式来设置大小和颜色的；
• 矢量图不失真；
• 文件加载体积小；
• 适合多平台（浏览器、iOS App、Android App）；

缺点：

• 单色
• 维护成本高

2.如何在 HTML中使用图标字体

以阿里的iconfont图标库为例：

步骤一.找到阿里巴巴矢量图标库官网,然后注册登录

步骤二.找到图标管理->我的项目->然后新建项目

image.png

点击如下按钮，新建一个项目用于存放自己常用的图标

image.png

步骤三.往项目里添加我们想要的图标

搜索想要的图标

image.png

鼠标移到对应的图标上面，加入到购物车

image.png

步骤四.添加至购物车后，购物车上面显示对应的数量，点击购物车加入到项目

image.png image.png image.png

步骤五.在页面中引入生成的字体文件（分为2种，一种是直接引用线上的地址，另一种是将字体文件下载到本地）

1.直接引用线上的地址
点击"暂无代码，点此生成"

image.png

此时，点击"点此复制代码"或者直接复制下面的链接，将链接引入到html文件中

image.png

此时查看页面，图标已经显示出来了

image.png

2.将字体文件下载到本地，在页面中引用文件中的iconfont.css文件

image.png

下载后的文件如下：

image.png

将这些文件放入同一个目录中，然后在页面引入iconfont.css

image.png

此时查看页面，图标已经显示出来了

image.png

以上就是阿里巴巴矢量图标库-iconfont的使用，另外根据项目需求也可以生成自己的图标字体，也就是将svg图片转换为图标字体，具体可参考https://icomoon.io/app/#/select