使用ionic开发手机app中，设置tab中的icon为自定义图标的方法

    最近，由于项目需求，研究了一下angularjs+ionic+cordova开发手机app。

问题描述：

    在开发过程中，我想使用自定义的图片设置tab中的icon，但是并未生效。代码如下：

<ion-tab title="主页" icon="/img/tabbar_home.png" href="#/tab/home">
    <ion-nav-view name="tab-home"></ion-nav-view>
</ion-tab>

解决办法：

    我知道有两种方法可以实现这种效果。

第一种：使用svn格式的矢量图，生成字体文件，然后在css中引用字体文件。

    参考：http://wenku.baidu.com/link?url=rfWH4XEE5wkA1GGQcsRcF0pBIyjwIjbd5TdRUbSu8R0v3L2Dv6KkwTbdOS7oZITOk6v2zkWsyjuFYof4FmI8y6souOcm6pqms0i662I1Eqq

    使用这种方法比较麻烦。

第二种：使用css样式设置自定义图片.

    具体做法，直接看代码：

<ion-tabs class="tabs-icon-top tabs-light">

    <ion-tab title="主页" icon="bar-home" href="#/tab/home">
        <ion-nav-view name="tab-home"></ion-nav-view>
    </ion-tab>

    <ion-tab title="地图" icon="bar-map" href="#/tab/map">
        <ion-nav-view name="tab-map"></ion-nav-view>
    </ion-tab>

    <ion-tab title="问题反馈" icon="bar-suggest" href="#/tab/suggest">
        <ion-nav-view name="tab-suggest"></ion-nav-view>
    </ion-tab>

    <ion-tab title="设置" icon="bar-setting" href="#/tab/setting">
        <ion-nav-view name="tab-setting"></ion-nav-view>
    </ion-tab>

</ion-tabs>

<style type="text/css">

  .bar-home {
    background:url(img/tabbar_home.png) no-repeat center;
  }
  .bar-map {    

    background:url(img/tabbar_look.png) no-repeat center;  

  }

  .bar-suggest {

    background:url(img/tabbar_suggest.png) no-repeat center;

  }

  .bar-setting {

    background:url(img/tabbar_setting.png) no-repeat center;

  }

</style>

    我个人觉得，第二种方法是比较简单的。