mui自定义图标
程序员文章站
2022-04-22 20:28:00
...
研究了一下自定义图标，不仅仅可以在h5里面用，还可以在小程序或者别的开发环境里面用。
首先找到图标源，我自己找的是阿里巴巴矢量图库。
将用到的图标添加入库，就是购物测的图标
打开库存
直接点击下载代码
最后解压下载的文件就会得到需要的数据
然后再编辑器中打开iconfont.css 文件
可以根据选择将需要的文件放到同目录的css下
理论上只要一个iconfont.ttf就可以了，但是为了兼容还是可以把.svg 和.woff也放到自己的项目下
因为我是在mui中使用的，先截个图
<!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>
<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" href="workbench/main.html">
<span class="mui-icon iconfont icon-shebeizhuangtai"></span>
<span class="mui-tab-label">工作台</span>
</a>
<a class="mui-tab-item" href="business/main.html">
<span class="mui-icon iconfont icon-shujukanban"></span>
<span class="mui-tab-label">营业分析</span>
</a>
<a class="mui-tab-item" href="">
<span class="mui-icon iconfont icon-icon_tianjia"></span>
<span class="mui-tab-label">收银记账</span>
</a>
<a class="mui-tab-item" href="inventory/main.html">
<span class="mui-icon iconfont icon-icon_baocun"></span>
<span class="mui-tab-label">库存管理</span>
</a>
<a class="mui-tab-item" href="personal/personal.html">
<span class="mui-icon iconfont icon-icon_zhanghao"></span>
<span class="mui-tab-label">我的</span>
</a>
</nav>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</body>
</html>
使用时，一定要mui-icon+iconfont+图标名字，这是在mui中的用法，至于其他的环境可以自己研究一下，
整体还是相当方便的。如果没有显示看看文件漏放了没有，然后看看css路径
要把 css 和 .ttf文件等放到同目录下就可以了
上一篇： 分享一篇面试的实例教程
下一篇： php curl调用接口问题