mui框架遵循极简原则，在icon图标集上也是如此，mui仅集成了原生系统中最常用的图标；使用icon图标集的优点：
- 多个图标字体合成一个字体文件，避免每张图片都需要联网请求；
- 字体可任意缩放，而图片放大会失真、缩小则浪费像素；
- 可通过css任意改变颜色、设置阴影及透明效果；
一、操作方法：
（1）找到任意矢量图标库网站，在这里举例阿里巴巴矢量图标库官网
（2）搜索自己想要的图标样式，例如首页
（3）选中心仪的图标将他加入小车车，然后点击右上角的小推车
（4）出现如下界面后点击添加至项目，在这里我们也可以选择多种自己心仪的icon图标，如果没有项目则新建一个项目
（5）完成以上步骤后会跳转到项目管理界面，然后点击下载就会得到一个压缩文件
（6）对刚下载的压缩文件进行解压，然后将解压文件中的iconfont.css及iconfont.ttf两个文件分别拷贝到mui工程css及fonts目录下
（7）修改部分代码，如下图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<link href="fonts/iconfont.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<nav class="mui-bar mui-bar-tab " id="nav">
<a class="mui-tab-item mui-active" id="a1">
<span class="mui-icon iconfont icon-shouye"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item " id="a2">
<span class="mui-icon iconfont icon-ditu"><span class="mui-badge">9</span></span>
<span class="mui-tab-label">地图</span>
</a>
<a class="mui-tab-item " id="a3">
<span class="mui-icon iconfont icon-shoucang"><span class="mui-badge">9</span></span>
<span class="mui-tab-label">收藏</span>
</a>
</nav>
</body>
</html>
