首先打开Iconfont-阿里巴巴矢量图标库
网址 http://www.iconfont.cn/
输入你想要的图标
搜索你想要的图标之后，并加入购物车
加入购物车
打开右上角购物车，查看你下载的图标，并点击右下角的下载代码
查看购物车并下载代码
查看保存在本地的文件
查看保存的文件
一共有三种引用方式
下面我们详细说明一下这三种引用方式
1、unicode引用
特点：
1、兼容性最好，支持IE6及所有现代的浏览器。
2、支持按字体的方式去动态调整图标大小和颜色等。
3、不支持多色，只能使用单色图标。即便是项目里有多色图标也会自动去色。
使用步骤
第一步：拷贝项目下面生成的font-face
放在style里
第二步：定义使用iconfont的样式
放在style里
第三步：挑选相应图标并获取字体编码，应用于页面
<i class="iconfont">3</i>
注："iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。
2、font-class引用
font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。
特点：
1、兼容性良好，支持IE8+，及所有现代的浏览器。
2、不支持多色，只能使用单色图标。即便是项目里有多色图标也会自动去色。
3、相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
4、因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
使用步骤
第一步：引入项目下面生成的fontclass代码：
引入方式
第二步：挑选相应图标并获取类名，应用于页面：
<i class="iconfont icon-xxx"></i>
"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。
3、symbol引用
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。
特点：
1、支持多色图标，不再受单色限制。
2、通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
3、兼容性较差，支持IE9+，及现代浏览器。
4、浏览器渲染svg的性能一般，还不如png。
使用步骤
第一步：引入项目下面生成的symbol代码：
<script src=''./iconfont.js''></script>
第二步：加入通用css代码（引入一次就行）：
引入一次就可以
.icon { width:1em; height:1em; vertical-align:-0.15em; fill: currentColor; overflow: hidden;}
第三步：挑选相应图标并获取类名，应用于页面：
<svg class=''icon'' aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
以上就是所有的步骤。当然iconfont也支持在线引用，后续再更新。
网友评论