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、注册账号

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

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">&#xea0a;;</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噢~