MUI自定义图标
在用HBuilder开发一些手机APP的时候，常常会要用到一些MUI框架里面没有的图标，下面我说一下如何自定义HBuilder的图标。
MUI使用的图标不是图片，而是字体。首先要找到图标源，我用的是阿里巴巴矢量图库。
第一步：注册登录，然后搜索选择自己需要的图标，点击添加入库，你需要的图标就会添加到右上角的购物车了
第二步：点击右上角的购物车，点击下载代码，把图标给下载下来，把下载完成的压缩包给解压了就会得到需要的文件
第三步：用编辑器打开iconfont.css文件，把URL修改成存放ttf的路径，如下图：
第四步：然后iconfont.css和iconfont.ttf放进需要的文件放到同目录的css下
添加完后写代码，下来我给大家演示的是选项卡里有图标的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css/mui.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
</head>
<body>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon iconfont icon-zhifubao"></span>
<span class="mui-tab-label">支付宝</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon iconfont icon-icon_tianjia"></span>
<span class="mui-tab-label">快捷</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon iconfont icon-icon_baocun"></span>
<span class="mui-tab-label">故障码</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon iconfont icon-icon_zhanghao"></span>
<span class="mui-tab-label">分享</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon iconfont iconfenxiang"></span>
<span class="mui-tab-label">查询</span>
</a>
</nav>
</body>
</html>
使用时，一定要mui-icon + iconfont + 图标名字，这是在mui中的用法，至于其他的环境可以自己研究一下，整体还是相当方便的。如果没有显示看看文件漏放了没有，然后看看css路径要把 css 和 .ttf文件等放到同目录下就可以了。
扫一扫
1292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
