ionic3使用阿里矢量图标库

• 登录Iconfont官网

• 搜索图标并加入购物车

image.png

-点击‘添加至项目’ 把图标添加到项目中，没有项目要自己创建项目

image.png

• 将项目文件下载到本利并打开

image.png

• 将字体放到你的项目中

image.png

将这些文件放在项目的assets/img/tab中

image.png

-在你的项目中tabs.scss中添加如下代码

@font-face {font-family: "Ionicons";
  src: url('../assets/img/tab/iconfont.eot'); /* IE9*/
  src: url('../assets/img/tab/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../assets/img/tab/iconfont.woff') format('woff'), /* chrome, firefox */
  url('../assets/img/tab/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('../assets/img/tab/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.ion-qq1:before { content: "\e600"; }

image.png

• 应用如下：

<div class="categories">
    <ion-grid>
      <ion-row wrap>
        <ion-col text-center tappable col-3 *ngFor="let c of categories" (click)="goProductList(c)">
          <ion-icon class='ion-qq1' style='font-size:17px'></ion-icon> 
          <span class="title">{{c.FavoritesTitle}}</span>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>

image.png

• tab 使用的话

  
  image.png

image.png