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中使用这些图标了，但还会遇到一些问题，比如：

设置ion-tab的icon-on/off

上图是在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>

效果如下图：

模仿微信通讯录

三.总结

ionic在布局细节控制上不是很方便（建立粗糙框架很快），使用时可能需要额外的工具样式，比如：

.mt10 {
    margin-top: 10px;
}

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

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

稍复杂的布局用grid实现起来不方便，但用float/relative之类的可以快速实现，所以自备工具样式仍然是必要的