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、效果图

一、注册帐号

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

二、选择适合的图标加入项目

先选几个加到购物车~

由于图标是按项目分组的，生成的连接和下载生成的css或js都是按你这个项目决定的，全部图标在一个项目的话，就在一个文件里，是方便咱们后期使用~

不过一开始就随便建个项目好了~

三、查看在线连接、点击生成

分为Unicode、Font class 、Symbol三种类型，其中前两种是纯色，后一种是彩色~

四、在线

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>

五、离线、点击下载至本地

文件夹内容以下，点击每一个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>

六、源码

https://github.com/JiaXinYi/I...

若是对你有帮助的话欢迎star和fork噢~