参考: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>