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