阿里iconfont矢量图库使用

原创
2018/07/04 19:53
阅读数 6.2K

iconfont可以像使用字体一样使用矢量库中所有的矢量图,在web中使用,有3中使用方式,分别是:

1)unicode引用 2)font-class引用 3)symbol引用(平台推荐的用法)

font-class引用方式使用最为方便:

1、阿里矢量图库,检索你想要的矢量图:http://www.iconfont.cn 

2、添加入库

3、添加到你的项目里,注:如果还没项目,可以根据需要新建一个

4、在“我的项目”中可查看已添加的矢量图

将项目下font class中的css添加到你页面html的head部分,就可以开始使用已添加的矢量图

5、示例代码截图

创建一个i标签或者span标签,添加两个类名,一个固定的是iconfont,另一个是你想要的那个图标对应的类名(即上图的icon-xxxxx):

==================完美分割线==================

一开始找到一个国外有名的矢量图库地址 fontawesome.com,但发现即使你只需要使用几个矢量图也得把所有关联js、css、字库都下载下来才可以使用,大小都在大几十KB。在这点上iconfont可以只需要添加使用到的矢量class即可,可很好控制文件大小

 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
0
分享
返回顶部
顶部