ionic使用自定义icon

一、问题描述

ionic项目提供了一套丰富的图标库，虽然很实用，但是在实际项目中，还是需要根据视觉稿来增加图标。
通常，我们都会使用@font-face导入自定的字体文件。

二、准备图标

打开阿里图标库，把想要的图标加入购物车，然后添加至项目。

图标加入购物车 添加到我的项目

在我的项目中，找到你刚刚新添加的图标所属的项目，点击上面的 更多操作 -> 编辑项目

编辑项目

修改项目设置,把前缀改为ion- ，因为ionic的图标都是ion-开头的，修改完之后，保存，下载

下载图标代码到本地

三、ionic项目操作

3.1 打开你的ionic项目，在src->assets目录下，新建一个fonts目录，然后解压刚刚下载的图标文件，把以下几个文件拷贝到新建的fonts目录下

拷贝代码到fonts目录下

3.2 把iconfont.css 改为iconfont.scss，打开iconfont.scss，修改.iconfont类

.iconfont {
    font-family: "iconfont" !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

注意：
1、要把font-size: 16px; 删除，不然图标会变小。
2、@font-face的font-family值跟上面修改类的名字要对应，如果@font-face的font-family值为iconfont，那上面修改的类名称也要改为.iconfont。

3.3 ion-ios-*

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

@font-face {
    font-family: "iconfont";
    src: url('../assets/fonts/iconfont.eot?t=1563854062704');
    /* IE9 */
    src: url('../assets/fonts/iconfont.eot?t=1563854062704#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMsAAsAAAAAB3AAAALdAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqCeIJCATYCJAMICwYABCAFhG0HMxtrBhHVk6lkPwrjmNgeZhqs9Nf/7dHY9yF4HtfK95PsXi57BKxKzBaZRpiWVdkh6UEVLgU5mBzQtjjnmXXU5UjOnjz6QjrgLCdhxf/ncGljY0Dz914cUMpzDI16AcYbC2iPm4vsDjeA3zC9fHkwz4cAjiwVpF2Hbv2wGPQsAWTa5ImjsSkvBsMSFiFYstEgmwhg1Wr1EGz0P16+qsuCIqDRJb0mtB9Hqw/RJkUv8hcZ5iLgjWcG2DbQQAUwIP1KrT3QYbSCxvGoIQ/rKhT4EO37rh5Z6z8PCaLzIwDIgNxz4tn8U81XABjYvQis6XUDMLlFjWbuENnzoCnq2r2UQYlu/7PGtcnKZY2++SJbbw99uhu06FRB1Ikzol3y9ttr7zrmRDewtqdbdGrNmTSE3MUp5UP3ni2MPnk6dXD6eWdEE9Uy9/24DHV7+axxs7afHpc12hhq7moH29Sr66gm2+FqZCuM2bYr5TEY1upxyijJ93LLaj1MzvWekLxaQm75/Hxp7XJ2JVQl7CpepRG1aJeu1MyEKr2qeICMjN6xpGZczZwTwcVEr/JeF5QW0AoAf/qPbvU7/oaIzENbR0Y3+29DBoCXw47/8N3+DO3sYE/aJvDyeS2rjBBohboMLrIpFiVmowCHA3zYGeddX2XinSYFS+L92sPIjEFjKUAabAUECNEAQSwtwVGu4/YQ8eagERMOlFkOQIhxERRReKCJ8QhpsG8hAL7zh55FbRh5tj5wbF80OhAKRg3yB5EqcmMZeBQUXjF4pYKSAp/yRKqjALiWk01cMEcaY0n9DjxmA4aKDM7gYpimBZRUxKjYCplL37ZN2RtZqsgaIwcECQxpQPoBEaWQM259Nsq9/xUKvKQEqqnI2Z8QqUX9A5fFaYG8SPNWFdfykNpbwMOYAQxSyIAzMKPURAugLB8XQwqzhD3CJZ+Napm2Umt+efZ0GwBHq1RmgGb4ocgDHTmaRgMAAAA=') format('woff2'),
        url('../assets/fonts/iconfont.woff?t=1563854062704') format('woff'),
        url('../assets/fonts/iconfont.ttf?t=1563854062704') format('truetype'),
        /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
        url('../assets/fonts/iconfont.svg?t=1563854062704#iconfont') format('svg');
    /* iOS 4.1- */
}

.iconfont {
    font-family: "iconfont" !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ion-ios-shangdian:before,
.ion-ios-shangdian-outline:before {
    @extend .iconfont;
}

.ion-ios-shangdian:before {
    content: "\e60f";
}

3.4 修改相对路径 ../assets/fonts/

如 src: url('../assets/fonts/iconfont.eot?t=1563854062704');

3.5 导入iconfont.scss

在src/theme/variables.scss 中导入iconfont.scss

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

variables.scss

3.6 在html中使用图标

ion-icon

效果如下：

效果图

注意：我这里使用的是class,而不是name。使用name时，图标无法显示，提示404 ，如下图：

<ion-tab-button tab="tab1">
      <ion-icon name="ios-shangdian"></ion-icon>
      <ion-label>网商</ion-label>
    </ion-tab-button>

image.png

注：我使用的ionic版本为 5.2.3

参考文章：
ionic 3自定义图标
ionic Usage