iconFont 阿里巴巴矢量图标使用方法

原文链接： https://www.mk2048.com/blog/blog.php?id=h0jkkh22102j&title=iconFont+%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4%E7%9F%A2%E9%87%8F%E5%9B%BE%E6%A0%87%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95

挑选图标的过程（共6步）

1. 进入网站：Iconfont网址：http://www.iconfont.cn
2. 点击网站上方的“官方图标库”，选择自己喜欢的图标。在这里我选择天猫的图标库。
3. 选择好自己喜欢的图标，你可以有两个选择，下载代码 和 添加至项目。
4. 我们这两选择添加至项目，然后新建项目，并输入名称。
5. 项目添加好后，会自动给我们转入到我们项目库中。点击查看在线链接。
6. 生产css引入的代码，生成后就可以在项目首页index.html引入了。
   

   <link rel="stylesheet" href="http://at.alicdn.com/t/font_wyhhdpv5lhvbzkt9.css">

   
   

图标的使用：

图标顺利引入到项目中，已经可以使用它们了，在“我的项目中”你会看到图标的font class值。可以直接复制代码粘贴，也可以自己写代码。

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

　　在各个组件中就可以使用了

这样在页面中就可以看到图标了。

更多专业前端知识，请上 【猿2048】www.mk2048.com