mui app自定义图标

Mui使用的图标不是单纯的图片方式，在这里我们从图标的选择、下载、引用来说明一下：

先打开阿里巴巴矢量图标库

http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.1

可以通过上述的查询框，查找需要使用到的图标，然后添加到库

再单击右上角的下面库图标

单击上述的下载代码按钮，下载所选择图标的代码内容，将下载的内容解压出来，如下所示：

在这里我们主要用到上述两个红框内的文件,将上述文件分别拷贝到MUI APP相对应的文件夹下，如下图所示：

打开iconfont.css,文件内容如下:

@font-face {font-family: "iconfont";  src: url('iconfont.eot?t=1505178278378'); /* IE9*/  src: url('iconfont.eot?t=1505178278378#iefix') format('embedded-opentype'), /* IE6-IE8 */  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),  url('iconfont.ttf?t=1505178278378') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/  url('iconfont.svg?t=1505178278378#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-icongis:before { content: "\e64f"; }.icon-shishishuju:before { content: "\e606"; }.icon-gis:before { content: "\e601"; }.icon-shishishuju1:before { content: "\e73c"; }

将上述的内容修改如下：

@font-face {font-family: "iconfont";    src:url('../fonts/iconfont.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/}.iconfont {  font-family:"iconfont" !important;  font-size:16px;  font-style:normal;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}.icon-icongis:before { content: "\e64f"; }.icon-shishishuju:before { content: "\e606"; }.icon-gis:before { content: "\e601"; }.icon-shishishuju1:before { content: "\e73c"; }

在需要引入图标的文件中加入如下引用：

<link href="css/iconfont.css" rel="stylesheet" />

引入图标的代码如下：

<ul class="mui-table-view mui-grid-view mui-grid-9"><li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-3"><a href="files/realdata.html"><span class="mui-icon iconfont icon-shishishuju"></span><div class="mui-media-body">实时数据</div>

上述的icon-shishishuju标记在如下文件中查找：

好了，按照上述操作就可以自定义MUI的界面图标了!