mui自定义图标

mui使用的图标并不是图片，并不是在img标签中显示的，而是在span标签中：

<span class="mui-icon iconfont icon-chuguofuwu">

从阿里图库中选择需要用到的图标，添加入库

点击购物车，你选择的图标都在，添加至项目。

然后会来到这个页面：

下载到本地，我们会看到下载的文件夹目录：

iconfont.css和iconfont.ttf是我们项目中需要用到的两个文件。
打开iconfont.css文件如下：

@font-face {font-family: "iconfont";
  src: url("iconfont.eot?t=1481615719070"); /* IE9*/
  src: url("iconfont.eot?t=1481615719070#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("iconfont.woff?t=1481615719070") format("woff"), /* chrome, firefox */
  url("iconfont.ttf?t=1481615719070") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url("iconfont.svg?t=1481615719070#iconfont") format("svg"); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-chuguofuwu:before { content: "e730"; }

.icon-qingjia:before { content: "e619"; }

.icon-639-copy:before { content: "e63f"; }

.icon-jisuanji:before { content: "e60b"; }

.icon-icon-copy:before { content: "e602"; }

.icon-zhengjianbanli:before { content: "e636"; }

.icon-chuchai:before { content: "e671"; }

.icon-shipinhuiyi:before { content: "e600"; }

.icon-cailiaoshenbao:before { content: "e620"; }

.icon-dangdiyongche:before { content: "e603"; }

.icon-peixun:before { content: "e601"; }

.icon-gerenpeixunxuqiu:before { content: "e6fe"; }

.icon-zhanghaobangdingyeyouxiang:before { content: "e6b4"; }

.icon-fuwu-02:before { content: "e604"; }

.icon-jiaban:before { content: "e64c"; }

修改一下iconfont.css文件：

@font-face {font-family: "Muiicons";
    font-weight: normal;
    font-style: normal;
        src:url("../fonts/iconfont.ttf") format("truetype"); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    }

.mui-icon
{
    font-family: Muiicons;
    font-size: 24px;
    font-weight: normal;
    font-style: normal;
    line-height: 1;

    display: inline-block;

    text-decoration: none;

    -webkit-font-smoothing: antialiased;
}


.icon-chuguofuwu:before { content: "e730"; }

.icon-qingjia:before { content: "e619"; }

.icon-639-copy:before { content: "e63f"; }

.icon-jisuanji:before { content: "e60b"; }

.icon-icon-copy:before { content: "e602"; }

.icon-zhengjianbanli:before { content: "e636"; }

.icon-chuchai:before { content: "e671"; }

.icon-shipinhuiyi:before { content: "e600"; }

.icon-cailiaoshenbao:before { content: "e620"; }

.icon-dangdiyongche:before { content: "e603"; }

.icon-peixun:before { content: "e601"; }

.icon-gerenpeixunxuqiu:before { content: "e6fe"; }

.icon-zhanghaobangdingyeyouxiang:before { content: "e6b4"; }

.icon-fuwu-02:before { content: "e604"; }

.icon-jiaban:before { content: "e64c"; }

注意@font-face中src:url(‘../fonts/iconfont.ttf’) format(‘truetype’); 与iconfont.ttf文件在项目中的路径保持一致：

在项目中记得引入iconfont.css文件：

<link href="../resources/ui/mui-master/dist/css/iconfont.css" rel="stylesheet"/>

datagrid中某一列是mui图标：

{
                    field:"miconCls",title:"mui图标",width:130,align:"center",
                    formatter:function(value,row,index){
                        return "<div id=""+row.id+""><span class="mui-icon iconfont icon-chuguofuwu"></span></div>";
                    }
                },

自定义mui图标ok!

IE浏览器下不适用！