mui自定义图标

曾经终败给现在 2022-03-19 17:40 449阅读 0赞

研究了一下自定义图标，不仅仅可以在h5里面用，还可以在小程序或者别的开发环境里面用。

首先找到图标源，我自己找的是阿里巴巴矢量图库。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70][]将用到的图标添加入库，就是购物测的图标

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70 1][]

打开库存

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70 2][]

直接点击下载代码

最后解压下载的文件就会得到需要的数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70 3][]

然后再编辑器中打开iconfont.css 文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70 4][]

可以根据选择将需要的文件放到同目录的css下

理论上只要一个iconfont.ttf就可以了，但是为了兼容还是可以把.svg 和.woff也放到自己的项目下

因为我是在mui中使用的，先截个图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70 6][]

<!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">
 			
 			工作台
 		</a>
 		<a class="mui-tab-item" href="business/main.html">
 			
 			营业分析
 		</a>
 		<a class="mui-tab-item" href="">
 			
 			收银记账
 		</a>
 		<a class="mui-tab-item" href="inventory/main.html">
 			
 			库存管理
 		</a>
 		<a class="mui-tab-item" href="personal/personal.html">
 			
 			我的
 		</a>
 	</nav>
 	<script type="text/javascript" charset="utf-8">
 			mui.init();
 	</script>
 </body>
 </html>

使用时，一定要mui-icon+iconfont+图标名字，这是在mui中的用法，至于其他的环境可以自己研究一下，

整体还是相当方便的。如果没有显示看看文件漏放了没有，然后看看css路径

要把 css   和 .ttf文件等放到同目录下就可以了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70]: /images/20220319/87451c08766145dab0d1871a95c68f71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70 1]: /images/20220319/b4cfb51fa3754406b3f53d7dc982b470.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70 2]: /images/20220319/5924cb5b083d4ceea25e829182b8872d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70 3]: /images/20220319/6e4f9b32a558471cb8f68575a5ae6bfc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70 4]: /images/20220319/3be516e6af444c25a86ea883d17fd05b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70 5]: /images/20220319/035c1775924e4fa2828ab1cce7b0a2c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70 6]: /images/20220319/8ebf7aff97e84deda821a327835cfae4.png