阿里巴巴矢量图标库怎么用 阿里矢量图标库用法

阿里矢量图标库用法,阿里巴巴矢量图标库怎么用 。小编来告诉你更多相关信息 。
其实很简单,自己看官方即可,不过为了增深自己的记忆,特写出来:
一、阿里矢量图的网址:http://iconfont.cn/,截止到发稿共有1,094,241个图标 。

阿里巴巴矢量图标库怎么用 阿里矢量图标库用法

文章插图
阿里巴巴矢量图标库怎么用 阿里矢量图标库用法

文章插图
官网 二、使用:
输入自己想找的图标,搜索,例如我搜索home,出现了许多图标:如图:
阿里巴巴矢量图标库怎么用 阿里矢量图标库用法

文章插图
阿里巴巴矢量图标库怎么用 阿里矢量图标库用法

文章插图
搜索出来的图标
2、点击购物车,出现自己选择的图标,选择最下面的下载,下载到本地:
阿里巴巴矢量图标库怎么用 阿里矢量图标库用法

文章插图
阿里巴巴矢量图标库怎么用 阿里矢量图标库用法

文章插图
已经搜索出来的图标
【阿里巴巴矢量图标库怎么用 阿里矢量图标库用法】选择“下载代码”,将文件下载到本地 。
三、引用:
1、fontclass方式引用:
阿里巴巴矢量图标库怎么用 阿里矢量图标库用法

文章插图
阿里巴巴矢量图标库怎么用 阿里矢量图标库用法

文章插图
使用步骤
二、symbol方式引用:
阿里巴巴矢量图标库怎么用 阿里矢量图标库用法

文章插图
阿里巴巴矢量图标库怎么用 阿里矢量图标库用法

文章插图
引用第一步
阿里巴巴矢量图标库怎么用 阿里矢量图标库用法

文章插图
阿里巴巴矢量图标库怎么用 阿里矢量图标库用法

文章插图
引用完成 三、unicode引用
阿里巴巴矢量图标库怎么用 阿里矢量图标库用法

文章插图
阿里巴巴矢量图标库怎么用 阿里矢量图标库用法

文章插图
第一步,注意修改路径
阿里巴巴矢量图标库怎么用 阿里矢量图标库用法

文章插图
阿里巴巴矢量图标库怎么用 阿里矢量图标库用法

文章插图
定义字体
阿里巴巴矢量图标库怎么用 阿里矢量图标库用法

文章插图
阿里巴巴矢量图标库怎么用 阿里矢量图标库用法

文章插图
在html中引用 几种应用方法的比较:
第三种复杂,但是兼容ie6;
第二种快捷,简单 。但是兼容性较差,支持 ie9+,及现代浏览器 。浏览器渲染svg的性能一般,还不如png 。
第一种适中,介于2者之间 。
至于选择哪种方式,根据你的需求来做适当的选择 。

    推荐阅读