ionic如何使用第三方iconfont，以及图标微调 （转载）

---

本文转自：
http://www.ayqy.net/blog/ionic%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E7%AC%AC%E4%B8%89%E6%96%B9iconfont/

---

一.问题重述

虽然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.可能遇到的其它问题

1.如何调整图标大小（尺寸）

ionic的icon默认font-size是32px，但第三方字体初始大小不统一，同样的font-size会显示出不同的大小，可以修改对应图标的before，例如：

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

这个字体的27px与ion-xx的32px宽高差不多，肉眼微调就可以了

2.如何控制图标竖直居中

这是个比较严重的问题，修改了font-size后，图标在竖直方向不居中了，需要给自定义图标应用line-height: 1，例如：

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

这句是从ionic样式中找到的，理论上不会有奇怪的副作用，比line-height: 100%、line-height: 32px;更安全一些

3.如何微调图标位置

设置了line-height发现还是无法居中，这很科学，可能是因为制作字体时，svg图片本身就偏离了中心，所以偶然会遇到这种情况，需要relative微调：

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

左右不对可以微调left/right

4.如何组合图标（类似于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之类的可以快速实现，所以自备工具样式仍然是必要的。