ionic 如何使用第三方 iconfont

一.問題重述

雖然 ionic 官方提供了很多圖標（ion-xx），但還是不夠用，很多圖標都找不到（微信/QQ/二維碼/搖一搖...）

當然，按照以前的做法，可以去一些開源圖標庫裡找，比如Iconfont-阿里巴巴矢量圖標庫

找到之後，要怎麼把第三方 iconfont 導入 ionic，以便在模版文件中使用？

二.解決方案

1.iconfont 的引入方式

查看 ionic 的 lib 文件夾可以發現：

lib\ionic\fonts 字體文件
lib\ionic\css   樣式文件

樣式文件 ionic.css 中定義了 iconfont：

@font-face {
    font-family: "Ionicons";
    src: url("../fonts/ionicons.eot?v=2.0.1");
    src: url("../fonts/ionicons.eot?v=2.0.1#iefix") format("embedded-opentype"), url("../fonts/ionicons.ttf?v=2.0.1") format("truetype"), url("../fonts/ionicons.woff?v=2.0.1") format("woff"), url("../fonts/ionicons.woff") format("woff"), url("../fonts/ionicons.svg?v=2.0.1#Ionicons") format("svg");
    font-weight: normal;
    font-style: normal;
}
/*...*/
.ion-alert:before {
    content: "\f101";
}
.ion-alert-circled:before {
    content: "\f100";
}
.ion-android-add:before {
    content: "\f2c7";
}
/*...*/

引用 iconfont 的方式和我們所熟悉的一樣，沒什麼特殊的，我們也可以用這樣的方法引入自定義 iconfont

注意：不要修改 lib，亂動別人的東西可不好

2.具體操作

在 www 目錄下新建 font 文件夾，把 ttf, woff, eot, svg 都丟進去，然後在我們自己的 www/css/style.css 引入字體文件：

@font-face {font-family: 'iconfont';
    src: url('../font/iconfont.eot'); /* IE9*/
    src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../font/iconfont.woff') format('woff'), /* chrome、firefox */
    url('../font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('../font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
/*!!! 這個類名必須是 icon*/
.icon{
    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;
}

特別注意：設置字體效果的 css 類必須叫icon，後面再解釋原因

然後就可以在模版 html 中使用這些圖標了，但還會遇到一些問題，比如：

[caption id="attachment_855" align="alignnone" width="302"] 設置 ion-tab 的 icon-on/off[/caption]

上圖是在 ion-tab 指令中使用自定義圖標，要把字體效果類命名為 icon 就是為了在類似的指令中直接使用，例如：

<ion-tab title="通訊錄" icon-on="icon-tongxunlu" icon-off="icon-tongxunluxianxing" href="#/root/contacts">
    <ion-nav-view name="tab-contacts"></ion-nav-view>
</ion-tab>

ionic 自動處理上面的指令，生成a>i+span這樣的結構，圖標通過 i 標籤顯示出來：

<i class="icon icon-tongxunluxianxing" ng-if="getIconOff() &amp;&amp; !isTabActive()"></i>

這裡 i 標籤只會自動擁有 icon 類，名稱不是 icon 的樣式類就不會被應用

P.S.很容易想到給 ion-tab 添上class="my-icon"，不過很遺憾，生成的 i 標籤並沒有class="my-icon"，反抗無效，所以，乖乖的把類名改成 icon 吧

3.可能遇到的其它問題

如何調整圖標大小（尺寸）

ionic 的 icon 默認font-size是 32px，但第三方字體初始大小不統一，同樣的font-size會顯示出不同的大小，可以修改對應圖標的 before，例如：

    .icon-tongxunluxianxing:before { content: "\e6bf"; font-size: 27px;}

這個字體的 27px 與 ion-xx 的 32px 寬高差不多，肉眼微調就可以了

如何控制圖標豎直居中

這是個比較嚴重的問題，修改了font-size後，圖標在豎直方向不居中了，需要給自定義圖標應用line-height: 1，例如：

    .icon:before {
        line-height: 1;
    }

這句是從 ionic 樣式中找到的，理論上不會有奇怪的副作用，比line-height: 100%、line-height: 32px;更安全一些

如何微調圖標位置

設置了line-height發現還是無法居中，這很科學，可能是因為製作字體時，svg 圖片本身就偏離了中心，所以偶然會遇到這種情況，需要 relative 微調：

    .icon-faxian:before { content: "\e607"; font-size: 20px; position: relative; top: 3px;}

左右不對可以微調left/right

如何組合圖標（類似於 badge）

如果想在圖標角角上添個小紅點（類似於 badge 的效果），可以這麼幹：

    /* 右下角 */
    .icon-badge-rb:before {
        font-size: 16px;
        position: relative;
        bottom: -2px;
    }

在模版文件中這樣使用：

    <i class="icon ion-ios-person positive">
        <span class="icon icon-badge-rb ion-ios-checkmark-outline"></span>
    </i>

效果如下圖：

[caption id="attachment_856" align="alignnone" width="301"] 模仿微信通訊錄[/caption]

三.總結

ionic 在佈局細節控制上不是很方便（建立粗糙框架很快），使用時可能需要額外的工具樣式，比如：

.mt10 {
    margin-top: 10px;
}

.fz-sm {
    /*默認 16px*/
    font-size: 14px;
}

.icon-sm:before {
    font-size: 20px;
}

稍複雜的佈局用 grid 實現起來不方便，但用 float/relative 之類的可以快速實現，所以自備工具樣式仍然是必要的