阿里巴巴矢量图标引用问题

第一步:
摒弃之前的先从图标库下载源代码,再引入font样式到自己的项目中的步骤,换作如下步骤操作即可。
之前新建的font文件夹,可以删掉了。
阿里巴巴矢量图标引用问题

新的引入图标方法:

1. 挑选所需图标,加入购物车
阿里巴巴矢量图标引用问题
2.选择 ——> 添加至项目:
阿里巴巴矢量图标引用问题
如果之前没有项目,点击右上角的 + 号按钮,新建一个 任意项目即可:
阿里巴巴矢量图标引用问题
3.此时,购物车里的图标已经添加到项目里了
阿里巴巴矢量图标引用问题
4.点击生成代码,即可生成下图红色方框中的代码,将此代码复制到自己本地新建的iconfont.css 文件中:
阿里巴巴矢量图标引用问题

阿里巴巴矢量图标引用问题

5.将鼠标放到 需要引入的图标上,点击复制代码:
阿里巴巴矢量图标引用问题
6.将复制到的字体图标代码粘帖到自己要显示的网页中:
阿里巴巴矢量图标引用问题

查看效果,手机图标已经引用过来:
阿里巴巴矢量图标引用问题
7.此时,若想要添加其它新的图标,直接添加到之前在线新建的项目中即可,添加完成之后,它会提示,你有新的图标添加,会让你更新代码,也就是我们本地文件引入的css代码:
阿里巴巴矢量图标引用问题
点击更新代码后,将代码复制到本地的iconfont.css文件中,将之前的css文件覆盖重写,此时再引入新添加的图标,便可完美引入,不会对之前引入的图标造成影响。

阿里巴巴矢量图标引用问题