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

最新推荐文章于 2025-09-26 07:00:00 发布

原创最新推荐文章于 2025-09-26 07:00:00 发布 · 3.1k 阅读

3 ·

CC 4.0 BY-SA版权

Ionic3 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何在Ionic项目中集成Iconfont图标。步骤包括：登录官网、选择图标、下载项目、引入CSS文件及在页面上展示图标。还介绍了如何通过Angular *ngFor指令动态加载图标。

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>

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

页面展示：