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"></span>
本人测试完成,大功告成。