ionic2實戰-使用阿里巴巴矢量圖標庫Iconfont

2017.02.18 18:38* 字數 633

爲何使用阿里巴巴矢量圖標庫Iconfont

• Iconfont提供了近百萬數量的圖標,而且有多種使用方式
• 咱們要使用字體圖標,相對圖片佔用小,更清晰,大小顏色更易控制
• ionic官方提供的圖標不夠用,沒有具體業務方面合適的圖標

如何使用Iconfont

1. 登陸Iconfont官網

   • 官網提供了github和新浪微博兩種登陸方式,若是直接用微博登陸不上去,那先登陸新浪微博,再去Iconfont用微博登陸
   • 本文是Iconfont web端的詳細使用教程,其餘使用方式,建議閱讀官方幫助文檔

2. 搜索圖標並加入購物車

   搜索圖標並加入購物車

3. 點擊右上角購物車圖標,在打開的窗口中,點擊"添加至項目",沒有項目則會提示建立項目

   將圖標添加至項目

   建立項目

一.在app中使用自定義字體圖標-Iconfont官方方式

1. 效果圖

   在app內容區域中使用自定義圖標

2. 在圖標管理-個人項目中編輯圖標,並生成圖標連接

   Paste_Image.png

3. 複製生成的連接並添加到appsrc/index.html文件中.注意:給連接加上http:或https:不然在真機上顯示不出來.固然也能夠把資源下載到本地進行引用iconfont.css

   複製生成的css連接

   在index.html添加css連接

4. 效果圖完整代碼以下

<ion-header>
  <ion-navbar>
    <ion-title>
      Contact
    </ion-title>
  </ion-navbar>
  <style>
    .my-icon>i{
      font-size: 32px;
      height: 36px;
      margin:10px;
    }
  </style>
</ion-header>

<ion-content>
  <div class="my-icon">
    <i class="iconfont icon-patorl-task" color="primary"></i>
    <i class="iconfont icon-patorl-record" color="primary"></i>
    <i class="iconfont icon-repair-task" color="energized"></i>
    <i class="iconfont icon-repair-record" color="energized"></i>
    <i class="iconfont icon-experiment-task" color="secondary"></i>
    <i class="iconfont icon-experiment-record" color="secondary"></i>
    <i class="iconfont icon-guard-task" color="danger"></i>
    <i class="iconfont icon-guard-record" color="danger"></i>
  </div>
  <ion-list>
    <ion-item>
      試驗記錄
      <ion-icon class="iconfont icon-experiment-record" color="secondary" item-right></ion-icon>
    </ion-item>
    <ion-item>
      巡檢記錄
      <ion-icon class="iconfont icon-patorl-record" color="primary" item-right></ion-icon>
    </ion-item>
    <ion-item>
      <ion-icon class="iconfont icon-patorl-task" color="primary" item-left></ion-icon>
      巡檢任務
    </ion-item>
    <ion-item>
      <ion-icon class="iconfont icon-experiment-task" color="secondary" item-left></ion-icon>
      試驗任務
    </ion-item>
  </ion-list>
</ion-content>

二.在tab中使用自定義字體圖標-ionic方式

1. 效果圖

2. 挑選圖標並下載到本地

3. 複製字體文件到項目中

4. 新建一個tab.scss文件,並複製下載的iconfont.css文件的內容到其中

5. 修改後的tab.scss

6. 在tab中使用

7. 其實在任何地方均可以用zhifubao和qq,也能夠不用新建tab.scss,直接把自定義的css寫在src/theme/variables.scss文件中,由於全部的.scss最終編譯的css都放在了www/build/main.css文件中

三.在tab中使用自定義圖標-圖片方式

1. 效果圖

   在tab中使用自定義圖標

2. 看圖看代碼

3. 上圖代碼

   .ion-ios-my-test:before {
   content: url("../assets/icon/test.png");
   }
   .ion-ios-my-test-outline:before {
   content: url("../assets/icon/test-outline.png");
   }
   .tab-button[aria-selected=true] .ion-md-my-test:before {
   content: url("../assets/icon/test.png");
   }
   .tab-button[aria-selected=false] .ion-md-my-test:before {
   content: url("../assets/icon/test-outline.png");
   }

最後

不少人都犯得錯誤