为了账号安全,请及时绑定邮箱和手机立即绑定

使用阿里矢量图标库的三种方法

标签:
Android

其实很简单,自己看官方即可,不过为了增深自己的记忆,特写出来:

一、阿里矢量图的网址:http://iconfont.cn/,截止到发稿共有1,094,241个图标。

使用阿里矢量图标库的三种方法

官网

二、使用:

输入自己想找的图标,搜索,例如我搜索home,出现了许多图标:如图:

使用阿里矢量图标库的三种方法

搜索出来的图标

把鼠标移到图标上,出现三个选项,加入购物车、收藏和下载。我们把自己想要的图标添加到购物车,依次选择自己中意的图标并加入购物车。

2、点击购物车,出现自己选择的图标,选择最下面的下载,下载到本地:

使用阿里矢量图标库的三种方法

已经搜索出来的图标

选择“下载代码”,将文件下载到本地。

三、引用:

1、fontclass方式引用:

使用阿里矢量图标库的三种方法

使用步骤

二、symbol方式引用:

使用阿里矢量图标库的三种方法

引用第一步

使用阿里矢量图标库的三种方法

引用完成

三、unicode引用

使用阿里矢量图标库的三种方法

第一步,注意修改路径

使用阿里矢量图标库的三种方法

定义字体

使用阿里矢量图标库的三种方法

在html中引用

几种应用方法的比较:

第三种复杂,但是兼容ie6;

第二种快捷,简单。但是兼容性较差,支持 ie9+,及现代浏览器。浏览器渲染svg的性能一般,还不如png。

第一种适中,介于2者之间,

至于选择哪种方式,根据你的需求来做适当的选择。

原文链接:http://www.apkbus.com/blog-866962-63585.html

点击查看更多内容
3人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消