mui中从阿里巴巴矢量图标库官网制作自定义图标icon

1.从阿里巴巴图标库选择图标，进入到如下页面

2.下载到本地后，得到如下文件，我们用到的文件为红圈的2个文件

3.然后修改css文件

    原代码为：

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

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

.icon-contacts:before { content: "\e62c"; }

.icon-me:before { content: "\e607"; }

.icon-app:before { content: "\e602"; }

.icon-msg:before { content: "\e603"; }

我们可稍作如下修改：

• 为保证和mui目录结构统一，建议将字体文件放在fonts目录下，这样我们需要修改@font-face下得url属性；
• 只兼容iOS和Android版本的话，我们仅需要ttf格式的字体即可，其它字体可以删除；同时，我们也仅需保留-webkit前缀语法，-moz前缀部分可以删除；

修改后的css代码如下：

 注意：以下红色3处，很容易被忽略，导致

@font-face {font-family: "iconfont";
  src: url('../fonts/iconfont.ttf?t=1526523868880') format('truetype');/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
}

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

.icon-contacts:before { content: "\e62c"; }

.icon-me:before { content: "\e607"; }

.icon-app:before { content: "\e602"; }

.icon-msg:before { content: "\e603"; }

4.然后将文件拷入项目中

5.引用图标

       在html页面添加如下代码 引用css样式

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

        然后通过如下就可以引用图标了

<span class="mui-icon iconfont icon-app"></span>
<span class="mui-tab-label">首页</span>