如何在ionic3中使用自定义图标

本教程受网上博客启发，传送门

获取icons

首先，你必须得到你的svg图标，如果你已经准备好了图标，你可以跳过这一步

图标资源网站推荐 iconfont、thenounproject

生成你的新字体

下载好需要的图标后，我们将使用一个应用Icon Moon,这个应用的基本用途是将SVG图标转换为浏览器可以理解的字体。这个应用中也包含了一些图标（大部分是免费的），因此如果你还没有找到你的SVG文件，可以从这里找。

好了，第一步我们需要引入SVG文件

iconmoon1

引入后看起来像下面这样

下一步选择需要生成字体的图标并点击页面下方的Genernate Font 按钮

我们将会看到一个图标配置窗口，点击下载，得到一个压缩包

设置CSS文件

下载好iconmoon.zip文件后，打开它，将fonts解压到src/assets/，将style.css解压到src/theme/并将style.css重命名为icons.css.

然后，为了引入icons.css,在app.scss加入下面代码 @import "../theme/icons"

打开icons.scss,改成下面的形式

@font-face {
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?tmmgio');
    src:  url('fonts/icomoon.eot?tmmgio#iefix') format('embedded-opentype'),
      url('../assets/fonts/icomoon.ttf?tmmgio') format('truetype'),
      url('../assets/fonts/icomoon.woff?tmmgio') format('woff'),
      url('../assets/fonts/icomoon.svg?tmmgio#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  
  [class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    vertical-align: middle;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  @mixin makeIcon($arg, $val, $col) {
    .ai-#{$arg}:before ,
    .ion-ios-ai-#{$arg}:before ,
    .ion-ios-ai-#{$arg}-outline:before ,
    .ion-md-ai-#{$arg}:before ,
    .ion-md-ai-#{$arg}-outline:before  {
      content: $val;
      font-size: 26px;
      color: $col;
    }
  }
@include makeIcon(YellowRing, '\e900',#D15B55);
@include makeIcon(RedRing, '\e901',#66B081);

请仔细阅读下面的说明，否则ion-icons将无法工作

因为某种原因，如果添加了自定义的icons，系统默认的icons将无法正常显示。我们不能不找到variables.scss文件并将@import "ionic.ionicons";改为@import "ionicons";

我们完成了，现在我们的工程可以完全适配系统图标和自定义图标。使用方法是一样的，示例如下

<ion-icon name='ai-YellowRing'></ion-icon>

Contents

获取icons

生成你的新字体

设置CSS文件