mui自定义图标-蒲公英云

mui自定义图标

研究了一下自定义图标，不仅仅可以在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">
            <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>