mui增加自定义icon图标

参考：http://ask.dcloud.net.cn/article/128

1.下载 .ttf 字体
2.修改css
3.测试

源码链接：https://pan.baidu.com/s/1OEgYtXS-dDWem-7W7IQR-A
提取码：hakh

效果如下

---

1.下载 .ttf 字体
传送门：阿里巴巴矢量图标库

选取图标后，添加到项目

下载到本地

2.解压后修改css

@font-face {
	font-family: iconfont;  
	src:url('../fonts/iconfont.ttf') format('truetype');
}

.iconfont {
  font-family: iconfont;
  font-size: 20px;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  
  display: inline-block;
  
  text-decoration: none;
  
  -webkit-font-smoothing: antialiased;
}

.iconfont ~ .mui-tab-label
{
    font-size: 13px;

    display: block;
    overflow: hidden;

    text-overflow: ellipsis;
}

.icon-nav1:before {
  content: "\e699";
}

.icon-nav2:before {
  content: "\e609";
}

.icon-nav3:before {
  content: "\e63b";
}

.icon-nav4:before {
  content: "\e75e";
}

3.测试
ctrl+c css和ttf到测试项目
使用如下

<nav class="mui-bar mui-bar-tab">
	<a id="defaultTab" class="mui-tab-item mui-active" href="1.html">
		<span class="iconfont icon-nav1"></span>
		<span class="mui-tab-label">首页</span>
	</a>
	<a class="mui-tab-item" href="2.html">
		<span class="iconfont icon-nav2"></span>
		<span class="mui-tab-label">课程</span>
	</a>
	<a class="mui-tab-item" href="3.html">
		<span class="iconfont icon-nav3"></span>
		<span class="mui-tab-label">发现</span>
	</a>
	<a class="mui-tab-item" href="4.html">
		<span class="iconfont icon-nav4"></span>
		<span class="mui-tab-label">我的</span>
	</a>
</nav>