在ionic2中使用自定義圖標渊迁，如iconfont（阿里巴巴矢量圖標）琉朽。
先在http://www.iconfont.cn/ 中找到自己需要的圖標箱叁，然后將圖標加入購物車耕漱，然后下載該圖標螟够。
這里寫圖片描述
下載完成后解壓妓笙，打開文件demo_unicode.html可以看到它提供的使用方法寞宫，我們在ionic2中按照以下方法使用：
1辈赋、在項目的assets目錄下新建fonts文件夾炭庙，然后將下載解壓后的iconfont.woff焕蹄、iconfont.ttf腻脏、iconfont.svg永品、iconfont.eot添加到fonts文件夾中鼎姐。
這里寫圖片描述
2饭尝、將font-face和自定義樣式寫入app.scss
@font-face {
font-family: 'iconfont';
src: url('../assets/fonts/iconfont.eot');
src: url('../assets/fonts/iconfont.eot?#iefix') format('embedded-opentype'),
url('../assets/fonts/iconfont.woff') format('woff'),
url('../assets/fonts/iconfont.ttf') format('truetype'),
url('../assets/fonts/iconfont.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.ion-qq:before {
content: '\e601'
}
3、在html頁面使用圖標
<i class="iconfont ion-qq"></i>
還有一種方式是按原有方式使用圖標涉瘾，需要修改第二步中的修改為以下代碼：
@font-face {
font-family: 'Ionicons';
src: url('../assets/fonts/iconfont.eot');
src: url('../assets/fonts/iconfont.eot?#iefix') format('embedded-opentype'),
url('../assets/fonts/iconfont.woff') format('woff'),
url('../assets/fonts/iconfont.ttf') format('truetype'),
url('../assets/fonts/iconfont.svg#iconfont') format('svg');
}
.icon{
font-family: "Ionicons" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.ion-ios-qq:before {
content: '\e601'
}
.ion-md-qq:before {
content: '\e601'
}
然后就可以按照<ion-icon name="qq"></ion-icon> 來使用。
