【Appetite】ionic3实录（三）修改自定义图标

常见图标有图像图标和字体图标两种，在移动端，字体图标对比图像图标有不少优点，所以一般采用字体图标为主。而字体图标的优缺点(使用图标字体的优点与缺点 | 骤雨打新荷)摘录如下，有兴趣可了解下：

图标字体的优点： 1、扩展性更强：图标字体可任意缩放、改变颜色、产生阴影或透明效果。 2、灵活性更高：图标字体可以得到CSS的很好支持，大小和颜色都很容易用CSS控制。 3、显示效果佳：矢量图标字体与分辨率无关，无论屏幕PPI高或低，显示效果俱佳。 4、兼容性更广：如果使用得当，图标字体100％可访问，并与几乎所有浏览器兼容。 5、优化效果好：由于图标字体体积更小而携带的信息并未削减，可大大减少HTTP请求。 图标字体的缺点： 1、由于图标字体只能被渲染成单色或者CSS3的渐变色，使得它不能被广泛使用。 2、很多精美图标字体是收费的，不过精美开源的免费图标也越来越多，并提供下载使用。 3、自已创作图标字体费时费力，后期维护成本偏高。

UI效果图给出了所需图标：

image.png

我们需要把它裁切并转成svg格式再生成字体图标，比较繁琐，而我新系统目前也没有装相应软件，所以这里不采用这些图标，选用网上已有类似的字体图标来代替。

免费的字体图标库很多，在这里我们打开阿里的图标库网站iconfont，随便找一个图标库（选图标库而不是选图标，是为了让图标风格一致）：

image.png

加入购物车，并下载代码：

image.png

下载完成解压，并把这几个文件拷贝到src/assets/fonts目录中：

iconfont.css
iconfont.eot
iconfont.svg
iconfont.ttf
iconfont.woff

关于图标文件的修改有好几种方法，网上搜索即可，在这里只介绍一种：

打开iconfont.css修改：

image.png

修改的内容，是为了可以用ionic的方式来使用这些自定义图标(其中，注意前缀是ion-ios-，不是icon-ios-)；

注释的内容，沿用ionic的，这里没必要使用；

复制的内容，是为了tab图标在失去焦点后显示另一种状态Outline，如有类似下图的一对图标的话，就其中一个设置为Outline，如果没有，就复制一份设置为Outline。

image.png

修改tabs.html里的图标名字为这几个自定义图标：

  <ion-tab [root]="tab1Root" tabIcon="zhuye"></ion-tab>
  <ion-tab [root]="tab2Root" tabIcon="bianqian"></ion-tab>
  <ion-tab [root]="tab3Root" tabIcon="xinxi"></ion-tab>
  <ion-tab [root]="tab4Root" tabIcon="lianxiren"></ion-tab>

最后在index.html里面添加:

<link rel="stylesheet" href="assets/fonts/iconfont.css">

或者，可以但不建议在app.scss或variables.scss中import:

@import "../assets/fonts/iconfont.css";

最最后浏览器运行查看下效果，在此就不上图了。