ionic自定義圖示

概述

Ionic 架構中内置了很多圖示，我們隻需要引用 ionic icons 中的樣式即可

Ionic tabs 示例工程中的 tab 圖示

<ion-tab title="Chats" // ion-ios7-chatboxes-outline on-ios7-chatboxes 指的就是圖示樣式 icon-off="ion-ios7-chatboxes-outline"  icon-on="ion-ios7-chatboxes" href="#/tab/chats"> <ion-nav-view name="tab-chats"></ion-nav-view> </ion-tab>

但是有時我們需要自己的圖示，是以我們需要定義自己的圖示 比如

原理

Ionic 中内置的所有圖示，都是通過字型檔案以css 樣式的方式引入

修改起來太麻煩

是以我們想要自己的圖示，可以參照這種方式，定義自己的圖示 ，自定義圖示實際上就成了自定義字型，歸納起來可分為三步

1這裡我們需要自己準備 svg格式的矢量圖

2 生成字型檔案

3 在CSS中引用字型檔案

自定義圖示操作步驟

A  将要生成的圖示 做成svg格式詳情可參見

 http://www.iconfont.cn/help/platform.html

B 到 https://icomoon.io/app/#/select網站生成圖示

1 單擊 import icons 按鈕導入我們準備好的svg 圖示集，或者Add  icons From Library 引用這個網站上的一些現成圖示

阿裡圖示庫：http://www.iconfont.cn/