MUI Tab icon 修改

需求场景：
1、图表美观、个性化
2、App瘦身
3、提高性能

常用的图库：阿里巴巴、flaticon、iconfinder
更多图库资源

下面以iconfont.cn为例：

一、资源

1、先登陆 登陆注册 搜索-选择资源加入购物车 选定资源
右上角购物车

此时可以直接下载素材，也可以添加至项目。

添加至项目，可以对资源做编辑操作(颜色、名称、旋转...)

添加至项目后，有下载至本地、和下载素材是一样的。
当然如果网络资源不满足需求，也可以自己上传图标至项目。

下载后的文件解压,得到下面这些文件：

二、使用

1、修改iconfont.css文件,下载下的文件包含了5种格式的文件eot、svg、ttf、woff、woff2，根据需要可以删除一些文件，比如这里只需要保留ttf这种格式。
查看iconfont.css文件

//修改前
// @font-face {font-family: "iconfont";
//  src: url('iconfont.eot?t=1563763558742'); /* IE9 */
//  src: url('iconfont.eot?t=1563763558742#iefix') format('embedded-opentype'), /* IE6-IE8 */
//  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
// url('iconfont.woff?t=1563763558742') format('woff'),
// url('iconfont.ttf?t=1563763558742') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
// url('iconfont.svg?t=1563763558742#iconfont') format('svg'); /* iOS 4.1- */
//} 


//修改后
@font-face {font-family: "iconfont";
  src:  url('iconfont.ttf?t=1563763558742') format('truetype');
}

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

.icon-meinv:before {
  content: "\e62e";
}

.icon-meinv1:before {
  content: "\e622";
}

.icon-meinv2:before {
  content: "\e600";
}

2、项目引用资源

把下载的资源文件放入对应的文件夹

3、代码配置

<nav id="bar" class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active" href="tab-main.html" data-id="main">
            <span class="mui-icon iconfont icon-meinv"></span>
            <span class="mui-tab-label">大美女</span>
        </a>
        <a class="mui-tab-item" href="tab-message.html" data-id="message">
            <span class="mui-icon iconfont icon-meinv1"></span>
            <span class="mui-tab-label">小美女</span>
         </a>
        <a class="mui-tab-item" href="tab-contact.html" data-id="contact">
            <span class="mui-icon iconfont icon-meinv2"></span>
            <span class="mui-tab-label">少女</span>
        </a>
</nav>

完成。

可参考文章：http://ask.dcloud.net.cn/article/128 但是里边图裂。