字体图标--iconfont

在写页面的时候，不可避免须要用到好多小图标，可让UI切图，可是这些切好的小图片在小屏手机上显示比较清晰，可能放到大屏上会有清晰度稍微降低的问题，这个问题能够用阿里巴巴矢量图标--iconfont

来完美解决（https://www.iconfont.cn/），由于iconfont的图标是矢量的，不会出现变形和清晰度降低问题，并且后期操做性灵活，能够改图标的大小，颜色就像操做字体的属性同样方便，下面就开始介绍

iconfont如何使用

1、根据上面的网址进入阿里巴巴矢量图标库。注册一个帐号，登陆

2、如图所示【图标管理】--【个人项目】，点击右侧的加号建立项目，填入项目名称和项目描述，最后点击【新建】，

例如我要在个人shop项目中使用这些图标，个人项目名称就是shop，项目描述就是shop项目的iconfont

 

 3、前两步是iconfont的就绪工做，第三步开始正式的使用，例如咱们选择一个home图标、一个返回箭头的icon为例，在右上角搜索框搜索“home”，下面会展现各类各样home的icon,选择咱们中意的一款

 

 

 

鼠标放上去会有一个浮层，点击加入购物车，同理在搜索箭头放入购物车，在点击购物车图标--【添加至项目】

 

在个人项目界面，选择【下载至本地】会获得一个如图所示的文件夹，把红框里的五个文件放到项目存放css,js的文件夹下，从新新建一个iconfont文件夹，而后把这五个文件放入iconfont文件夹下

，把绿色框圈住的iconfont.css文件放和项目存放css文件的地方

 

 

 

 

4、修改iconfont.css文件url的路径，修改为本身本地存放的路径，对照这几个url地址是否是正确引用了本身本地的项目文件，我截的图是本地已经修改后的正确路径

 

 5、项目使用

这个iconfont类是使用iconfont.css里的类名，这个是固定必须的，。是复制阿里巴巴矢量库里本身刚刚加入购物车的箭头函数的代码

 

 至此，iconfont的使用已经完成了