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,d09GRgABAAAAAAeYAAsAAAAACrgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7ktlY21hcAAAAYAAAABnAAABnNJ1dNFnbHlmAAAB6AAAA6gAAAR07JT3UmhlYWQAAAWQAAAALwAAADYO4ryqaGhlYQAABcAAAAAcAAAAJAfeA4VobXR4AAAF3AAAABAAAAAQD+kAAGxvY2EAAAXsAAAACgAAAAoCsAHGbWF4cAAABfgAAAAfAAAAIAETAPBuYW1lAAAGGAAAAUUAAAJtPlT+fXBvc3QAAAdgAAAANwAAAEiYqXRjeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sU4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVLysZG7438AQw9zA0AAUZgTJAQAtOQzqeJxjYGBgZWBgYAZiHSBmYWBgzGBgZACBJKAoI1icmYELLM7CYAbkcwAhE5CueOb+svL/fxQWCDCCVXCAWcwglYxsDAMGGAfOalTAAyZNoDxQeFdAMdCJz9whGCT+shKCGZgADpESfwB4nD1Tz2/cRBT2m9kZe8be8frHerzeX9l1YydNummcjbdJdjdIAQlQD0XAAYlLKn700tJbL0UKSEEckOCKhFQJSsuhghtQ6KFF6oVbOfWKAPXEn9Atz6mEZckz75vve+97fmMww3j2J71HYyMwVoxN40XjgmEAX4OhIl0Y5OMRWYPmgDV1qGie5gMzHY7oDPSQh1FRjjPNTe6Cgh5sDYoyH5EctsdzsgdF1AVotZPX/eWOT78AGee948Wr5Gto9tOOOz+zeGV9PyyWAuua4/st3//M4oxZhNRcBZd1JJiQfHGTuUnzXn+V9MFp5cn5t+pLbf/w0/GV7rIWAEdHELSX1O19L/HwvZ5Egd8yG3UrTurpqRCu/W3HgdPN/jLwqaHXf+mX1DUOjU+MHw0MLmcbMCm3R5BnQxfySbkP1S6tPOUj2IChyfsQ9cE8OaAAVwpMjpFoq5jDPmg0PkeNMQppk4cIFFWUbOFnDsuKbMCIuMC7kGskkDmMsxzTZpiqwNOTDBMNT7qYV4wqK8IasR4UVUF6ctJiEvWJqUtE/yfwnFdCrCywjLCqL4x0hGs9oZ+rztSPIJDRvKkGv3UotmuYXB7G33zr9uwrLT+kgnYfDOqIiwi0v6e0KbiaBbFqeXTmq47UHRHH5vqapTVLdhN3F9y2Fwf7ii+0xTlfJY5nvS1mlrBryQ4xTer7NSktWq/dcj6MGkS6klhyc7riEhMs8tgGcUlYv1Lbt8kvtnlJgHxMLTCpm08fsjDs94jt2aRelzYhktn2WTolZc2piRpbRX0yOkNQ/jjh0yDqYXlhqFbutNKLjLVSQTs/3XXrIPyw885y685KvRla8U7s7xHPCTJ37jmRQl8Cm9Laia31dUvvxixJ3B0VN7wXVCYFBXaaMEBTNp0DltA+R6QnwQ+olCalt+xjtMU5uipmmx5WK8l9UX9Xij+oEPSRDfJ923pAJBr0zk4fukHY71eNQUuSgGBSbtC9Wkmp4Jydhkp7NCIcwDBoNaT0B/LEiI1d4zzewwHOWnNru8SrpT1ups2totz2xpmJQNOrLuAMAl0NXDA4+feDcjKHbW8EZjXOGY6I95xMM3r16Y0khXPAyCEDYAcH7TT96umNdtqIG/c/EIn12s3FBafhOvC7choBpI+UfOOqaFvfPafctsgTSJODA8YWLzM4dyqBn5P0CEOLN51Gw+FgfiTExcUzcOMGALe6PtxN0u/lex9LkP/AS8i7Dtz+D+IzmFt4nGNgZGBgAOKzdWdq4vltvjJwszCAwNWHe6IQ9P+HLAzMEkAuBwMTSBQAX8kL5QB4nGNgZGBgbvjfwBDDwgACQJKRARWwAABHCgJtBAAAAAPpAAAEAAAABAAAAAAAAAAAdgHGAjoAAHicY2BkYGBgYXjCwMoAAkxAzAWEDAz/wXwGAB9tAgQAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAhZGJkZmRhZGVgbGCL8A7JTEzJzMxLzkjMS+dszy/KLs4J7O4hIEBAJmoChMA') 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>