ionic3 自定义图标

2019-01-10更新：鱼猫的个人博客上线啦！鱼猫的个人博客 欢迎点击查看哟！

说明：这篇文章介绍的方法步骤比较多，主要是在图标的准备那方面，对于这个，我重新写了一篇文章，步骤少一点，不需要去准备svg矢量图再转换成字体图标，有兴趣的可以看看《ionic3 自定义图标-鱼猫的个人博客》

---

     用了一段时间的ionic3，开发体验还是不错的。相比ionic1来说好了很多，开发过程让人舒服很多。但期间遇到一些问题，其中一个就是ionic3提供的图标有点少，有点满足不了需求，所以这时候用到自定义图标。以下

    已经用ionic3的童鞋应该会发现，ionic3现在使用图标的方式基本都是使用<ion-icon>这个组件，在加上相应的name属性，这个name对应的就是字体图标的名字，ionic便会在使用该组件的地方渲染出图标。那么，按照这种做法，我们也可以使用自定义的字体图标，代替ionic的图标库，完成自己的需求。

准备工作

    首先，准备好图标的svg的矢量图标

        有些童鞋可能会不明白怎么弄svg，这里介绍一个网站，相信很多人都知道，就是阿里云矢量图标网Iconfont-阿里巴巴矢量图标库，登录帐号好将想要的图标添加到购物车，然后下载素材，其中就有一个选项是下载svg格式的。

生成字体图标

进入icomoon网站使用svg图片生成字体图标

使用生成的字体图标

将下载的压缩包解压，把其中的fonts文件夹导入项目的assets文件夹中，并将解压得到的style.css文件重命名，改为icons.scss，并复制到src/assets/fonts文件夹下

修改icons.scss中@font-face的文件引用路径

修改字体公共样式

原代码

修改后

注：我们将[class^="ion-"], [class*=" ion-"] 选择器改为类，并让字体图标类去继承，因为使用[class^="ion-"], [class*=" ion-"] 选择器会影响ionic自带的图标库

修改字体图标

修改前

修改后

注：在ionic3中引用图标主要靠名称来引用，因为我项目已经声明为ios模式，所以类名都是ion-ios-*，其中像.ion-ios-user-outline这种是tab未被选中时的样式，每一个图标类后面必须再加一个-outline的类，不然字体图标会无法显示。

最后，在src/theme/variables.scss 中导入icons.scss，我们就可以使用自定义的字体图标了

来看看效果吧