1、進入阿里巴巴矢量圖標網站
2、將圖標加入購物車（需要登錄纔可以）
3，進入購物車將圖標添加入項目
3、下載到本地
4、解壓文件，將confont.js這個文件複製到你的項目裏
5、再網頁中引入confont.js,我放在了js文件夾下，加入圖標的css代碼
<script src="js/iconfont.js" type="text/javascript" charset="utf-8"></script><style type="text/css">
.icon{
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill:currentcolor;
overflow: hidden;
}
</style>6、修改html部分
完整代碼貼出來：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<script src="js/iconfont.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.icon{
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill:currentcolor;
overflow: hidden;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">清涼一夏</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon ">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xuegao"></use>
</svg>
</span>
<span class="mui-tab-label">雪糕</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon ">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-pijiu"></use>
</svg>
</span>
<span class="mui-tab-label">啤酒</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon ">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-bingjiling"></use>
</svg>
</span>
<span class="mui-tab-label">冰激凌</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon ">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-guozhi"></use>
</svg>
</span>
<span class="mui-tab-label">果汁</span>
</a>
</nav>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
</body>
</html>7、效果圖：
