ionic中使用iconfont图标

参考文章：http://www.cnblogs.com/tomboyxiao/p/7308065.html
阿里巴巴矢量图标库

1、在阿里巴巴中选择图标加入到购物车中，并将图标加入到自己的项目中

2、编辑项目增加相应的前缀 （主要是为了改写成ionic的样式时，少写一些代码）

Paste_Image.png Paste_Image.png

3、将图标下载到本地，接着将字段和样式（4个字体文件1个样式文件）共5个文件拷贝到
ionic项目的assets/fonts目录

Paste_Image.png Paste_Image.png

4、修改iconfont.css样式文件

@font-face {font-family: "Ionicons";
  src: url('iconfont.eot?t=1509421571648'); /* IE9*/
  src: url('iconfont.eot?t=1509421571648#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
  url('iconfont.ttf?t=1509421571648') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1509421571648#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"Ionicons" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ion-ios-custom-user:before { content: "\e632"; }
.ion-md-custom-user:before { content: "\e632"; }

.ion-ios-lock:before,.ion-md-lock:before { content: "\e729"; }

.ion-ios-school:before,
.ion-md-school:before,
.ion-ios-school-outline:before {
  content: "\e61c";
}

Note：
a. 修改font-family为Ionicons（为了不影响原来图标的使用）
b. 定义ios时要多定义一个outline （如上面的 .ion-ios-school-outline:before）

5、index.html中引入样式
<link rel="stylesheet" href="assets/fonts/iconfont.css">

6、使用
跟ionic一样 用name就可以：<ion-icon name="school"></ion-icon>

<ion-list inset class="loginInputs">
    <ion-item>
      <span item-left><ion-icon name="school"></ion-icon></span>
      <ion-input type="text" placeholder="请选择所属学校" [(ngModel)]="userInfo.schoolId" maxlength="11"></ion-input>
      <span item-right (click)="schoolChoose()"><ion-icon name="arrow-forward"></ion-icon></span>
    </ion-item>

    <ion-item>
        <span item-left><ion-icon name="custom-user"></ion-icon></span>
        <ion-input type="text" placeholder="请输入学号" [(ngModel)]="userInfo.code" maxlength="11"></ion-input>
    </ion-item>

    <ion-item>
        <span item-left><ion-icon name="lock"></ion-icon></span>
        <ion-input type="{{pwhide?'password':'text'}}" placeholder="请输入密码" [(ngModel)]="userInfo.password" maxlength="11"></ion-input>
        <span item-right (click)="pwhide=!pwhide">          
          <ion-icon name="{{pwhide?'eye-off':'eye'}}"></ion-icon>
        </span>
    </ion-item>
    <ion-item class="login-btn-item">
        <button ion-button outline block large (click)="loginSubmit()">登录</button>
    </ion-item>
    <!-- <button ion-item >
      abcsadfds
    </button> -->
  </ion-list>

Paste_Image.png