摘要：最近在使用和開發一款。期間遇到如何在項目中使用自定義圖標字體文件的問題，經過研究，找到了一個解決方法，記錄一下。然后，書寫一份文件，內容如下字體名和路徑等等，根據需要自定義就可以了。

最近在使用ionic3和Angular開發一款App。開發體驗還是挺好的。期間遇到如何在項目中使用自定義圖標字體文件的問題，經過研究，找到了一個解決方法，記錄一下。

ionic項目提供了一套豐富的圖標庫，在ionic3中也進行了升級。雖然很實用，但是在實際項目中，還是需要根據視覺稿來增加圖標。

通常，我們都會使用@font-face導入自定的字體文件。那么我們怎么將這些圖標融入到ionic3的項目中去呢？

下面以ionic3中的tabs組件作為例子，提出一種解決方式。

話說問題是解決了，但是看起來其實并不優雅，不過能解決問題。=.=||

ionic3中提供圖標使用的方式有不少，其中非常重要的組件是:ion-icon，基本的使用方法如下:

name屬性是圖標的名稱，這樣ionic就會在這個標簽處渲染生成一個圖標。其他的用法，還有:

根據不同的設計風格使用不同的圖標(ios or md-->Material Design)

設置圖標的不同狀態

作為特定組件的屬性

ionic也為自己的圖標庫提供了一個預覽的頁面，Ionicons

在例子中，tabs組件使用圖標的方式，是這樣的:

通過設置tabIcon屬性,就可以使用圖標庫中指定的圖標。

仔細看一下渲染后的html結構，你會發現，ion-tab其實是在模板中加入了ion-icon組件：

那么，ionic是如何根據一個name屬性，就鏈接到他的圖標庫中的圖標呢？

由于ionic3使用了Angular作為框架開發，因此ion-icon要么是組件，要么是指令。所以我們看看它的源碼，是如何實現圖標文件的使用的。

源碼傳送門：ion-icon

從源碼中我們可以看到，ionic把ion-icon定義為一個指令，有三個步驟:

進行平臺風格(ios、md）判斷和狀態的判斷。

根據判斷的結果，將輸入的圖標名稱，進一步組合成為如下形式的格式化文本

ion-{平臺風格標識}-{圖標名}-{修飾}

將上一步得到的格式文本，添加到元素的class屬性中。

至此，也很好理解了，通過一個css類，就可以使用圖標庫中的字體定義(@font-face)

ionic將自己的圖標字體的scss文件放在ionicons.scss中，定義字體名稱為Ionicons。

而圖標庫則成為另外一個git項目，相關的類型放在ionicons-icon.scss中。在github中打開源碼文件，ctrl+f搜索heart，可以看到css是這樣的:

.ion-ios-heart:before { content: "f443"; }
.ion-ios-heart-outline:before { content: "f442"; }

通過偽元素，指明了對應的圖標字體。-outline后綴指明的是輪廓形狀的圖標。

知道了這些，我們就可以自定義字體文件和css類，從而讓ion-icon也支持我們自定義的圖標了。

圖標文件，一般大家都會用illustrator矢量設計軟件設計，然后導出.svg格式的文件。

要打包成字體文件，也有不少工具，常用的是阿里出品的 iconfont。具體使用方法，網站上講解的非常清楚，這里就不多說了。

當你上傳自己的圖標svg文件，導入項目，下載完成后，會得到一堆文件。

有3種方式，可以使用圖標:

unicode 最原始的方式，但是兼容性好。

fontclass 使用偽元素和css類的方式，與ionic一樣，兼容限制ie8+

symbol 唯一支持保留顏色的方式，但是兼容性需要考慮(支持svg的設備和瀏覽器可以)

在例子中，我們選用fontclass足矣。

將生成的字體文件拷貝到ionic項目src目錄下assets中(具體目錄根據項目的要求，這里只是例子)的fonts目錄里。

然后，書寫一份.scss文件，內容如下:

@import "ionicons-variables";

$jpicons-font-path: $font-path !default;

@font-face {
  font-family: "jp-icon";
  src: url("#{$jpicons-font-path}/iconfont.eot?t=1493779389504"); /* IE9*/
  src: url("#{$jpicons-font-path}/iconfont.eot?t=1493779389504#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("#{$jpicons-font-path}/iconfont.woff?t=1493779389504") format("woff"), /* chrome, firefox */
  url("#{$jpicons-font-path}/iconfont.ttf?t=1493779389504") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url("#{$jpicons-font-path}/iconfont.svg?t=1493779389504#jp-iconfont") format("svg"); /* iOS 4.1- */
}

.jp-icon {
  font-family:"jp-icon" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

字體名和路徑等等，根據需要自定義就可以了。

下一步，就可以定義自己的類名了，由于例子使用Material Design風格，因此，定義如下:

.ion-md-jpicon__evalTab:before { content: "e64e"; }

.ion-md-jpicon__recTab:before { content: "e650"; }

.ion-md-jpicon__storeTab:before { content: "e651"; }

名字的定義按照之前提到的格式化文本的形式就可以，這里由于想說明清楚的原因，我把名字定義的略復雜了一點，實際使用中可以按自己需要修改。

最后別忘了一點，在你的基礎樣式表，比如:app.scss中導入這個scss文件。

@import "../assets/fonts/jpicons.scss";

無論怎樣，當你準備好這些文件時，下一步就可以使用自己的圖標字體啦。

在tabs組件中，可以很方便的使用定義好的字體：

在tabs組件的.scss文件中,我們重新定義在該tabs組件下使用的字體名稱:

.jp-tabs{
   .tab-button{
      &>ion-icon{
        font-family:"jp-icon" !important;   /*指定在當前組件中的ion-icon使用的字體名稱*/
      }
  }
}

此外，如果有定義圖標字體顏色的需求，簡單粗暴的方式是:

.tabs-md .tab-button[aria-selected=true]{
  color:$jp-color;
  .tab-button-icon{
    color:$jp-color;
  }
}

當一個tab被選中時，ionic會修改對應組件元素上的aria-selected,值是true/false。

運行ionic serve，查看渲染后的效果:

再看html代碼，可以驗證上面所講到的內容。

如果自定義組件和指令是不是也可以實現圖標字體的使用？我想是可以的。

本文只是提供了一種方法而已，不太優雅，但是可以解決問題。好處是，可以使用ionic中的一些關于圖標的功能，例如，在tabs組件中，可以設置tabLayout屬性來決定圖標和文字的布局關系，如果要自己開發布局等功能，當然可行，但是需要花費時間。作為一種實現，本文的介紹也算作一種方式吧。但作為研究和推敲原理，我想應該更深入的發現更好的方式。

個人能力有限，如果有什么錯漏，請大家批評指正，之后會再補充內容。