Ionic2入门教程（十二）使用阿里巴巴矢量图标库Iconfont
使用阿里巴巴矢量图标库Iconfont
系列教程看这里
Ionic2入门教程（一）安装和环境配置
Ionic2入门教程（二）进阶配置：Android打包
ionic2入门教程（三）高仿网易公开课（1）
ionic2入门教程（四）解读目录结构
ionic2入门教程（五）如何使用IonicPage
ionic2入门教程（六）地图服务（谷歌、高德、百度定位）
ionic2入门教程（七）来一个五星评分
ionic2入门教程（八）高仿网易公开课（2）
ionic2入门教程（九）样式修改和主题切换
Ionic2入门教程（十）如何debug一个Ionic应用
Ionic2入门教程（十一）制作一个视频背景欢迎页
Ionic自己的图标库：http://ionicframework.com/doc...
也很多了，但是有时候还是不够用，或者说不够适合，那么我们可以用阿里的矢量图标库，来使图标的使用更加灵活，同时也能很方便的使用彩色图标，为app添加一抹亮色~有些图标真的很可爱啊~
0、效果图
1、注册账号
2、选择适合的图标加入项目
先选几个加到购物车~
因为图标是按项目分组的，生成的链接和下载生成的css或js都是按你这个项目决定的，所有图标在一个项目的话，就在一个文件里，是方便我们后期使用~
不过一开始就随便建个项目好了~
3、查看在线链接、点击生成
分为Unicode、Font class 、Symbol三种类型，其中前两种是纯色，后一种是彩色~
4、在线
1.Unicode
第一步：拷贝项目下面生成的font-face、在css中添加
@font-face {
font-family: 'iconfont'; /* project id 462633 */
src: url('//at.alicdn.com/t/font_462633_ry5cpyoqrbnbfbt9.eot');
src: url('//at.alicdn.com/t/font_462633_ry5cpyoqrbnbfbt9.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_462633_ry5cpyoqrbnbfbt9.woff') format('woff'),
url('//at.alicdn.com/t/font_462633_ry5cpyoqrbnbfbt9.ttf') format('truetype'),
url('//at.alicdn.com/t/font_462633_ry5cpyoqrbnbfbt9.svg#iconfont') format('svg');
}第二步：定义使用iconfont的样式
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}第三步：挑选相应图标并获取字体编码，应用于页面
<ion-icon class="iconfont" color="secondary">;</ion-icon>
####2.Font class
第一步：拷贝项目下面生成的fontclass代码，在index中link
http和https都可以~
<link rel="stylesheet" href="https://at.alicdn.com/t/font_462633_ry5cpyoqrbnbfbt9.css">
第二步：挑选相应图标并获取类名，点击图标，复制代码，应用于页面：
<ion-icon class="iconfont icon-Apple" color="secondary"></ion-icon>
3.Symbol
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。这种用法其实是做了一个svg的集合。
特点如下：
- 支持多色图标了，不再受单色限制。
- 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
- 兼容性较差，支持 ie9+,及现代浏览器。
- 浏览器渲染svg的性能一般，还不如png。
第一步：拷贝项目下面生成的symbol代码，在index.html里加入：
<script src="http://at.alicdn.com/t/font_462633_ry5cpyoqrbnbfbt9.js"></script>
第二步：在SCSS加入通用css代码（引入一次就行）：
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}第三步：挑选相应图标并获取类名，应用于页面：
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-Android"></use>
</svg>
5、离线、点击下载至本地
文件夹内容如下，点击每个demo的html会告诉你用法，其实和上面完全一样：
我们需要的是iconfont.css和iconfont.js
将这两个文件复制到项目内、在index.html内引入
<link rel="stylesheet" href="./assets/icon/iconfont.css"> <script src="./assets/icon/iconfont.js"></script>
注释掉之前的即可
<link rel="stylesheet" href="https://at.alicdn.com/t/font_462633_ry5cpyoqrbnbfbt9.css"> <script src="http://at.alicdn.com/t/font_462633_ry5cpyoqrbnbfbt9.js"></script>
6、源码
https://github.com/JiaXinYi/I...
如果对你有帮助的话欢迎star和fork噢~