mui自定义图标

来源：互联网发布：华能贵诚信托知乎编辑：程序博客网时间：2024/05/21 17:13

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

0 0