ionic 字體的導入方法

更換字體

這是第一個圖標(蜜蜂推薦)是擼主原來的圖標

這是UI給的效果圖的圖標，顯然預設的圖標不符合要求

查找圖標所在的樣式，在tabs.html文件中

<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!--ion-ios-sunny-outline-->
  <!-- 蜜蜂推薦 -->
  <ion-tab title="蜜蜂推薦" icon-off="ion-ios-star-outline" icon-on="ion-ios-star" href="#/tab/main">
    <ion-nav-bar class="bar-light">
      <!--回退按鈕 返回前一個視圖-->
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="tab-main"></ion-nav-view>
  </ion-tab>

  <!-- 我的客戶 -->
  <ion-tab title="我的客戶" icon-off="ion-ios-rainy-outline" icon-on="ion-ios-rainy" href="#/tab/accounts">
    <ion-nav-view name="tab-accounts"></ion-nav-view>
  </ion-tab>

  <!-- 我的賬戶 -->
  <ion-tab title="我的賬戶" icon-off="ion-ios-cloudy-outline" icon-on="ion-ios-cloudy" href="#/tab/user_center">
    <ion-nav-bar class="bar-light">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="tab-user_center"></ion-nav-view>
  </ion-tab>

</ion-tabs>

icon-off="ion-ios-star" icon-on="ion-iso-sunny"
ion-ios-star為實體，ion-ios-star-outline為線框
點擊時出現過渡

釋放滑鼠顯示的樣式為實體

1.用圖片代替字體，弊端(點擊的時候沒有樣式)

思路：將字體設置為全透明，後面加背景圖，顯示出背景圖圖標

.ion-ios-sunny-outline:before {
  content: "11";
  background-image:url("../img/icon_star_off.png");
  background-repeat: no-repeat;
  background-size: 25px 25px;
  color:rgba(0,0,0,0);
}
.ion-ios-sunny:before {
  content: "11";
  background-image:url("../img/icon_star_on.png");
  background-repeat: no-repeat;
  background-size: 25px 25px;
  color:rgba(0,0,0,0);
}

效果：

點擊圖標，過渡效果（弊端：沒有過渡效果）

釋放滑鼠效果

2.從字體庫找字體替換預設字體(推薦使用)

阿裡圖標庫：阿裡圖標庫
下載後的文件夾

將

四個文件拷貝到你的地址中
複製iconfont.css裡面的代碼到你的css樣式表中，然後在tabs.html中使用它。

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <!-- 蜜蜂推薦 -->
  <ion-tab title="蜜蜂推薦" icon-off="iconfont icon-huodong" icon-on="iconfont icon-7a" href="#/tab/main">
    <ion-nav-bar class="bar-light">
      <!--回退按鈕 返回前一個視圖-->
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="tab-main"></ion-nav-view>
  </ion-tab>

  <!-- 我的客戶 -->
  <ion-tab title="我的客戶" icon-off="ion-ios-rainy-outline" icon-on="ion-ios-rainy" href="#/tab/accounts">
    <ion-nav-view name="tab-accounts"></ion-nav-view>
  </ion-tab>

  <!-- 我的賬戶 -->
  <ion-tab title="我的賬戶" icon-off="ion-ios-cloudy-outline" icon-on="ion-ios-cloudy" href="#/tab/user_center">
    <ion-nav-bar class="bar-light">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="tab-user_center"></ion-nav-view>
  </ion-tab>
</ion-tabs>

效果：

點擊圖標，過渡效果（弊端：沒有過渡效果）

釋放滑鼠效果

PS:大家覺得位置不對，那是因為擼主原來用背景圖的方式做的圖標，有位置改動。在寫文檔的時候並沒有改回來，用字體的時候大家根據實際效果改就好。