mui自定义图标(添加新图标)

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

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

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

然后会来到这个页面： 

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

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"; }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46

修改一下iconfont.css文件：如下

@font-face {font-family: "iconfont";
  font-weight:400;
  font-style: normal;
  src: url(/assets/mui/fonts/iconfont.ttf?v=171224181204) format('truetype'), //此处指定 iconfont.ttf所在的目录下
}
.iconfont {
  font-family:"iconfont";
  font-size:24px;
  font-weight:400;
  font-style:normal;
  line-height:1;
  display:inline-block;
  text-decoration:none;
  -webkit-font-smoothing:antialiased
}

.icon-zhiboguanli:before { content: "\e62c"; }

在页面中引用此图标

在head头部引用css文件

<link href="@assets('assets/mui/css/iconfont.css')"" rel="stylesheet"/>

在body下的span标签中引用图标名称

<span class="mui-icon iconfont">&#xe62c;</span>

本人测试完成，大功告成。