Ionic - 圖標 iconfont的使用（阿里圖標庫）

iconfont在ionic中的使用：

1.進入iconfont官方網址後

2.搜索你想要的圖標，添加到購物車（前提：是已經登錄，這裏可以使用github註冊登錄）

3.點擊購物車創建項目並下載到本地

4.下載之後的文件

5，在index.html引入

 

1. <!-- 引入iconfont的css -->

2. <link rel="stylesheet" href="assets/font/iconfont.css">

6.在頁面這樣顯示<i class="iconfont  icon-music"></i>(icon-music是圖標的名稱)

在iconfont.css裏面查看（也可以在這個文件裏設置想要的顏色，設置大小）

 

1. <ion-grid>

2. <!-- wrap：用來換行 -->

3. <ion-row wrap>

4. <ion-col text-center tappable col-3 *ngFor="let music of musicCate" >

5. <i class="iconfont {{music.icon}}"></i><br>

6. <span class="title">{{music.name}}</span>

7. </ion-col>

8. </ion-row>

9. </ion-grid>

這裏是我項目中取出圖片的方式，

頁面展示：