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浏览器下不适用！