最近在运用ionic3和Angular开辟一款App。开辟体验照样挺好的。时期碰到如安在项目中运用自定义图标字体文件的题目，经由研讨，找到了一个处理要领，纪录一下。

题目形貌

ionic项目供应了一套雄厚的图标库，在ionic3中也举行了晋级。虽然很有用，然则在现实项目中，照样须要依据视觉稿来增添图标。

平常，我们都邑运用@font-face导入自定的字体文件。那末我们怎样将这些图标融入到ionic3的项目中去呢？

下面以ionic3中的tabs组件作为例子，提出一种处理体式格局。

话说题目是处理了，然则看起来实在并不文雅，不过能处理题目。=.=||

明白ionic3中的图标组件

ionic icon的运用

ionic3中供应图标运用的体式格局有不少，个中异常重要的组件是:ion-icon，基本的运用要领以下:

<ion-icon name="heart" ></ion-icon>

name属性是图标的称号，如许ionic就会在这个标签处衬着天生一个图标。其他的用法，另有:

• 依据差别的设想作风运用差别的图标(ios or md–>Material Design)

• 设置图标的差别状况

• 作为特定组件的属性

ionic也为本身的图标库供应了一个预览的页面，Ionicons

tabs组件中运用icon

在例子中，tabs组件运用图标的体式格局，是如许的:

<ion-tabs>
    <ion-tab tabIcon="heart" [root]='tabPage1'></ion-tab>
    <ion-tab tabIcon="alarm" [root]="tabPage2"></ion-tab>
    <ion-tab tabIcon="at" [root]="tabPage3"></ion-tab>
</ion-tabs>

经由过程设置tabIcon属性,就能够运用图标库中指定的图标。

细致看一下衬着后的html构造，你会发明，ion-tab现实上是在模板中加入了ion-icon组件：

那末，ionic是怎样依据一个name属性，就链接到他的图标库中的图标呢？

ionic运用图标的道理

因为ionic3运用了Angular作为框架开辟，因而ion-icon要么是组件，要么是指令。所以我们看看它的源码，是怎样完成图标文件的运用的。

源码传送门：ion-icon

从源码中我们能够看到，ionic把ion-icon定义为一个指令，有三个步骤:

1. 举行平台作风(ios、md）推断和状况的推断。

2. 依据推断的结果，将输入的图标称号，进一步组合成为以下情势的花样化文本

   ion-{平台作风标识}-{图标名}-{润饰}

3. 将上一步获得的花样文本，添加到元素的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组件中，能够很轻易的运用定义好的字体：

<ion-tabs class="jp-tabs" >
    <ion-tab tabIcon="jpicon__storeTab" [root]="store" tabTitle="精选引荐" tabUrlPath="store" >
    </ion-tab>
    <ion-tab tabIcon="jpicon__recTab" [root]="recommend" tabTitle="运用场景" tabUrlPath="recommend" >
    </ion-tab>
    <ion-tab tabIcon="jpicon__evalTab" [root]="evaluation" tabTitle="深度评测" tabUrlPath="evaluation" >
    </ion-tab>
</ion-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属性来决议图标和笔墨的规划关联，假如要本身开辟规划等功用，固然可行，然则须要消费时候。作为一种完成，本文的引见也算作一种体式格局吧。但作为研讨和琢磨道理，我想应当更深切的发明更好的体式格局。

个人能力有限，假如有什么讹夺，请人人批评指正，之后会再补充内容。