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

来源:互联网 发布:矢量动画软件 编辑:程序博客网 时间:2024/06/06 04:34

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

新的引入图标方法:

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

这里写图片描述

5.将鼠标放到 需要引入的图标上,点击复制代码:
这里写图片描述
6.将复制到的字体图标代码粘帖到自己要显示的网页中:
这里写图片描述

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

这里写图片描述

原创粉丝点击