阿里巴巴矢量图标WEB应用之保姆级教程

Iconfont.cn是由阿里巴巴UX部门推出的矢量图标管理网站，也是国内首家推广Webfont形式图标的平台。网站涵盖了1000多个常用图标并还在持续更新中，Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。

官网：https://www.iconfont.cn

Iconfont的用法多种多样，同样是web使用也有3种不同的方式，我就说那个最简单方便的教程吧

1、使用Iconfont图标之前需要登录一下

2、登陆之后在搜索框搜索你想用的Iconfont图标，比如说现在想用一个做主页的图标，你就可以搜：主页、首页、home、家、shouye、zhuye等等等。。。支持多种模糊搜索无缝互译简直不要太简单！

3、找到你喜欢的Iconfont图标之后，点击购物车的图标添加入口，再然后右上角的购物车里面就有了

4、创建一个小项目，名字随意（这一步就相当于创建了一个文件夹），很简单填好名字点击确认

5、确认好项目名字后会将刚才购物车里的图标自动添加到这个项目里并自动跳转到项目管理页面，这事你要做的是：选中 Font class 然后点击生成代码

6、生成之后就会得到一个css资源的线上链接，然后将这个链接引用到你的网站里，css怎么引入不用我教你吧

防止有人真的不会，我写一下导入css的代码（每个项目生成的链接都不一样，要灵活运用）：

<link href="//at.alicdn.com/t/font_2693678_xj0hrla4dom.css"rel="stylesheet">

7、引入css文件之后离成功还剩最后一步了，给dom元素加入对应的class，你可以用span、i、b、等标签来定义，我推荐用 i 标签

<i class="iconfont icon-shouye_huaban1"></i>

注意 不要只添加 图标的class ，还要给一个初始的 iconfont 的class，很多人不知道这一步所以就不会生效，所以一个 i 标签至少有两个class！其中一个是不变的：iconfont

如果你现在用的是电脑，点击下面的【运行代码】来看看效果吧！

<link href="//at.alicdn.com/t/font_2693678_xj0hrla4dom.css"rel="stylesheet">

<style>
.iconfont{
    color:red;  /*图标颜色*/
    font-size:200px; /*图标大小*/
}
</style>

<i class="iconfont icon-shouye_huaban1"></i>

写在最后：

zblog的导航图标怎么添加？

1、获取iconfont的css在线资源并引用

2、在后台模块管理找到导航栏给对应的栏目设置好class就ok了

总结：找到自己心仪的对象并添加入库----生成 Font class 类型的 css 资源链接 ----- 在网页中引用 css 链接 ------ 给对应的标签添加两个 class （其中一个名字是万年不变的）