iconfont在ionic中的使用（阿里图标库）

iconfont在ionic中的使用：

1.进入iconfont官方网址后

2.搜索你想要的图标，添加到购物车（前提：是已经登录，这里可以使用github注册登录）

3.点击购物车创建项目并下载到本地

4.下载之后的文件

5，在index.html引入

 

<!-- 引入iconfont的css -->
 <link rel="stylesheet" href="assets/font/iconfont.css">

6.在页面这样显示<i class="iconfont  icon-music"></i>(icon-music是图标的名称)

 

在iconfont.css里面查看（也可以在这个文件里设置想要的颜色，设置大小）

 

 <ion-grid>
      <!-- wrap：用来换行 -->
      <ion-row wrap>
        <ion-col text-center tappable col-3 *ngFor="let music of musicCate" >
          <i class="iconfont  {{music.icon}}"></i><br>
          <span class="title">{{music.name}}</span>
        </ion-col>
      </ion-row>
    </ion-grid>                           

这里是我项目中取出图片的方式，

 

页面展示：