ionic3的自定义图标引入

引入步骤

• 从阿里巴巴矢量图标库导出字体文件夹
  
  • 将图标添加至购物车，点击购物车添加至项目
  • 在项目里直接下载
  • 会将所有的图标下载下来
• 解压下载文件，将所有带iconfont的文件（js有时不需要）放入项目中
  
  • 在src/assets下边建一个fonts文件夹将文件放入这里
  • 然后将下载文件中附带的iconfont.css文件里的东西放入路径为src/app/app.scss的文件里（需要更改下边有解释）
  • 也可以不放进里边，只需要将该iconfont.css文件重命名为scss文件，然后在src/app/app.scss里边导入该文件
  • @import ‘../assets/fonts/iconfont.scss’;（导入）
• 将文件导入项目后，需要对iconfont.scss也就是iconfont.css文件里边的内容进行修改。（修改如下）

//这个@font-face是你一次所下载的文件里所有图标的数据，如果下载了多次可以导入多个这个，下边的名字同样需要修改
@font-face {//这个就是导入的文件数据
  font-family: "Ionicons";//这里需要修改为这个名字（为了还可以使用ionic自带的图标） 
  src: url('iconfont.eot?t=1505467226459'); /* IE9*/
  src: url('iconfont.eot?t=1505467226459#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
  url('iconfont.ttf?t=1505467226459') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('iconfont.svg?t=1505467226459#iconfont') format('svg'); /* iOS 4.1- */
}

//不同与@font-face不管下载多少次图标，永远只需要引入一次这个  （毕竟一个是数据，一个是公用类名）
.icon {//这个类名也必须改为这个，为了还继续使用ionic的原图标   
  font-family: "Ionicons" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



//.icon-PKdailianchang:before { content: "\e979"; }

//.icon-workslist:before { content: "\e647"; }
//原文件是上边这两个，为了适应ionic需要改为下边这两个
// 这里之所以是两个是因为我就下载了两个图标，根据需求下载几个图标就需要从写几次。名字自己看着改，单前缀不去掉
.ion-md-pk:before,
.ion-ios-pk:before,
.ion-ios-pk-outline:before {
  content: "\e979";
}

.ion-md-works:before,
.ion-ios-works:before,
.ion-ios-works-outline:before {
  content: "\e647";
}


对了，@font-face里的数据来源于之前引入的其他文件，但是当多次在阿里下载时它的命名是一样的，所以当再次引入图标时需要更改文件名。同时需要在新引入的@font-face里的url里更改名字。

• 之后直接使用就可以了

<ion-tabs>
    <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="works"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="pk"></ion-tab>
    <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>