摘要：最近在使用和開(kāi)發(fā)一款。期間遇到如何在項(xiàng)目中使用自定義圖標(biāo)字體文件的問(wèn)題，經(jīng)過(guò)研究，找到了一個(gè)解決方法，記錄一下。然后，書(shū)寫(xiě)一份文件，內(nèi)容如下字體名和路徑等等，根據(jù)需要自定義就可以了。

最近在使用ionic3和Angular開(kāi)發(fā)一款A(yù)pp。開(kāi)發(fā)體驗(yàn)還是挺好的。期間遇到如何在項(xiàng)目中使用自定義圖標(biāo)字體文件的問(wèn)題，經(jīng)過(guò)研究，找到了一個(gè)解決方法，記錄一下。

ionic項(xiàng)目提供了一套豐富的圖標(biāo)庫(kù)，在ionic3中也進(jìn)行了升級(jí)。雖然很實(shí)用，但是在實(shí)際項(xiàng)目中，還是需要根據(jù)視覺(jué)稿來(lái)增加圖標(biāo)。

通常，我們都會(huì)使用@font-face導(dǎo)入自定的字體文件。那么我們?cè)趺磳⑦@些圖標(biāo)融入到ionic3的項(xiàng)目中去呢？

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

話說(shuō)問(wèn)題是解決了，但是看起來(lái)其實(shí)并不優(yōu)雅，不過(guò)能解決問(wèn)題。=.=||

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

name屬性是圖標(biāo)的名稱，這樣ionic就會(huì)在這個(gè)標(biāo)簽處渲染生成一個(gè)圖標(biāo)。其他的用法，還有:

根據(jù)不同的設(shè)計(jì)風(fēng)格使用不同的圖標(biāo)(ios or md-->Material Design)

設(shè)置圖標(biāo)的不同狀態(tài)

作為特定組件的屬性

ionic也為自己的圖標(biāo)庫(kù)提供了一個(gè)預(yù)覽的頁(yè)面，Ionicons

在例子中，tabs組件使用圖標(biāo)的方式，是這樣的:

通過(guò)設(shè)置tabIcon屬性,就可以使用圖標(biāo)庫(kù)中指定的圖標(biāo)。

仔細(xì)看一下渲染后的html結(jié)構(gòu)，你會(huì)發(fā)現(xiàn)，ion-tab其實(shí)是在模板中加入了ion-icon組件：

那么，ionic是如何根據(jù)一個(gè)name屬性，就鏈接到他的圖標(biāo)庫(kù)中的圖標(biāo)呢？

由于ionic3使用了Angular作為框架開(kāi)發(fā)，因此ion-icon要么是組件，要么是指令。所以我們看看它的源碼，是如何實(shí)現(xiàn)圖標(biāo)文件的使用的。

源碼傳送門：ion-icon

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

進(jìn)行平臺(tái)風(fēng)格(ios、md）判斷和狀態(tài)的判斷。

根據(jù)判斷的結(jié)果，將輸入的圖標(biāo)名稱，進(jìn)一步組合成為如下形式的格式化文本

ion-{平臺(tái)風(fēng)格標(biāo)識(shí)}-{圖標(biāo)名}-{修飾}

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

至此，也很好理解了，通過(guò)一個(gè)css類，就可以使用圖標(biāo)庫(kù)中的字體定義(@font-face)

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

而圖標(biāo)庫(kù)則成為另外一個(gè)git項(xiàng)目，相關(guān)的類型放在ionicons-icon.scss中。在github中打開(kāi)源碼文件，ctrl+f搜索heart，可以看到css是這樣的:

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

通過(guò)偽元素，指明了對(duì)應(yīng)的圖標(biāo)字體。-outline后綴指明的是輪廓形狀的圖標(biāo)。

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

圖標(biāo)文件，一般大家都會(huì)用illustrator矢量設(shè)計(jì)軟件設(shè)計(jì)，然后導(dǎo)出.svg格式的文件。

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

當(dāng)你上傳自己的圖標(biāo)svg文件，導(dǎo)入項(xiàng)目，下載完成后，會(huì)得到一堆文件。

有3種方式，可以使用圖標(biāo):

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

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

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

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

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

然后，書(shū)寫(xiě)一份.scss文件，內(nèi)容如下:

@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;
}

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

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

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

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

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

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

最后別忘了一點(diǎn)，在你的基礎(chǔ)樣式表，比如:app.scss中導(dǎo)入這個(gè)scss文件。

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

無(wú)論怎樣，當(dāng)你準(zhǔn)備好這些文件時(shí)，下一步就可以使用自己的圖標(biāo)字體啦。

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

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

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

此外，如果有定義圖標(biāo)字體顏色的需求，簡(jiǎn)單粗暴的方式是:

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

當(dāng)一個(gè)tab被選中時(shí)，ionic會(huì)修改對(duì)應(yīng)組件元素上的aria-selected,值是true/false。

運(yùn)行ionic serve，查看渲染后的效果:

再看html代碼，可以驗(yàn)證上面所講到的內(nèi)容。

如果自定義組件和指令是不是也可以實(shí)現(xiàn)圖標(biāo)字體的使用？我想是可以的。

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

個(gè)人能力有限，如果有什么錯(cuò)漏，請(qǐng)大家批評(píng)指正，之后會(huì)再補(bǔ)充內(nèi)容。