最近在用ionic3和Angular开发一个App。开发体验还是很不错的。期间遇到了如何在项目中使用自定义图标字体文件的问题。经过研究，我找到了解决方案并记录下来。问题描述ionic项目提供了丰富的图标库，在ionic3中也进行了升级。虽然很实用，但是在实际项目中，还是需要根据视觉稿添加图标。通常，我们会使用@font-face来导入自定义字体文件。那么我们如何将这些图标集成到ionic3项目中呢？下面以ionic3中的tabs组件为例提出解决方案。说是解决了问题，虽然看起来不优雅，但是能解决问题。=.=||了解ionicicon的使用，ionic3中的icon组件ionic3中的icon有多种使用方式，其中非常重要的一个组件是：ion-icon，基本使用方法如下：name属性是图标的名字，这样ionic就会在这个标签处渲染一个图标。其他用法包括：根据不同的设计风格使用不同的图标（ios或md-->MaterialDesign），将图标的不同状态设置为特定组件的属性，ionic也为自己的图标库提供了预览页面。在Ioniconstabs组件中使用图标示例中，tabs组件使用图标的方式是这样的：通过设置tabIcon属性，可以使用图标库中指定的图标。仔细观察渲染出来的html结构，你会发现ion-tab其实是在模板中添加了ion-icon组件：那么，ionic是如何根据一个name属性链接到其图标库中的图标的呢？ionic使用图标的原理由于ionic3使用Angular作为开发框架，所以ion-icon要么是一个组件，要么是一个指令。那么我们就来看看它的源码以及图标文件的使用方法吧。源码传送门：ion-icon从源码中可以看出，ionic将ion-icon定义为命令，分为平台风格（ios、md）判断和状态判断三个步骤。根据判断结果，将输入的图标名称进一步组合成格式化文本，形式为ion-{platformstylelogo}-{iconname}-{modification}将上一步得到的格式化文本添加到元素中间的类属性。至此，就很容易理解了。通过一个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{内容：“\f442”；}通过伪元素表示对应的图标字体。-outline后缀指定一个轮廓形状的图标。知道了这些，我们就可以自定义字体文件和css类了，这样ion-icon也可以支持我们自定义的图标了。准备图标文件图标文件一般是用Illustrator矢量设计软件设计好，然后导出为.svg格式。打包字体文件的工具也有很多，常用的是阿里出品的iconfont。具体的使用方法在网站上解释的很清楚，这里就不赘述了。当你上传自己的iconsvg文件，导入工程，下载完成后，会得到一堆文件。图标有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,iOS4.2+*/url('#{$jpicons-font-path}/iconfont.svg?t=1493779389504#jp-iconfont')格式('svg');/*iOS4.1-*/}.jp-icon{font-family:"jp-icon"!important;字体大小：16px；字体样式：正常；-webkit-font-smoothing：抗锯齿；-moz-osx-font-smoothing:grayscale;}字体名称和路径等，按需定制即可。在下一步中，您可以定义自己的类名。由于示例使用了MaterialDesign风格，因此定义如下：.ion-md-jpicon__evalTab:before{content:"\e64e";}.ion-md-jpicon__recTab:before{内容：“\e650”；}.ion-md-jpicon__storeTab:before{内容:"\e651";}名称的定义可以采用前面提到的格式化文本的形式。在这里，因为要说明清楚，我的名字定义稍微复杂一点，实际使用中可以根据自己的需要修改。最后别忘了在你的基础样式表中导入这个scss文件，比如：app.scss。@import'../assets/fonts/jpicons.scss';无论如何，当您准备好这些文件后，下一步就是使用您自己的图标字体。使用字体在选项卡组件中，您可以轻松使用定义的字体：="store">在tabs组件的.scss文件中，我们重新定义了标签组件下使用的字体名称：.jp-tabs{.tab-button{&>ion-icon{font-family:"jp-icon"!important;/*在当前组件字体名称中指定使用ion-icon*/}}}另外，如果需要定义图标的字体颜色，简单粗暴的方式是：.tabs-md.tab-button[aria-selected=true]{颜色：$jp-color；.tab-按钮图标{颜色：$jp-color;}}当一个tab被选中时，ionic会修改对应组件元素上的aria-selected，值为true/false。运行ionicserve看看渲染后的效果：再看html代码，可以验证上面提到的内容。总结如果自定义组件和指令，是否也可以使用图标字体？我认为这是可能的。本文只是提供一种方法，不够优雅，但可以解决问题。好处是可以使用ionic中一些关于图标的功能。比如在tabs组件中，可以通过设置tabLayout属性来决定图标和文字的布局关系。如果想自己开发布局等功能，当然可以，但是需要时间。作为一种实现，本文的介绍也可以算作一种方式。但是作为一个研究和推敲的原则，我觉得我们应该更深入地去寻找更好的方法。个人能力有限，如有错误或遗漏，请大家批评指正，稍后我会补充内容。
