MUI从入门到项目实战（三）增加自定义icon图标

本节我们会将上节新建的html进行改造

首先，修改底部导航

<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item mui-active">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item">
        <span class="mui-icon mui-icon-phone"></span>
        <span class="mui-tab-label">发现</span>
    </a>
    <a class="mui-tab-item">
        <span class="mui-icon mui-icon-email"></span>
        <span class="mui-tab-label">积分商城</span>
    </a>
    <a class="mui-tab-item">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">我的</span>
    </a>
</nav>

浏览器访问阿里巴巴图标库网，网址为：https://www.iconfont.cn/

查找自己需要的图标

 下载图标代码

修改css

• 为保证和mui目录结构统一，建议将字体文件放在fonts目录下，这样我们需要修改@font-face下得url属性；
• 只兼容iOS和Android版本的话，我们仅需要ttf格式的字体即可，其它字体可以删除；同时，我们也仅需保留-webkit前缀语法，-moz前缀部分可以删除；

原css为：

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

.icon-faxian:before {
  content: "\e612";
}

.icon-jifenshangcheng:before {
  content: "\e607";
}

.icon-wode:before {
  content: "\e66e";
}

.icon-pinpaijiameng:before {
  content: "\e60b";
}

修改后为：

@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-home:before {
  content: "\e6a9";
}

.icon-faxian:before {
  content: "\e612";
}

.icon-jifenshangcheng:before {
  content: "\e607";
}

.icon-wode:before {
  content: "\e66e";
}

.icon-pinpaijiameng:before {
  content: "\e60b";
}

将iconfont.css及iconfont.ttf两个文件分别拷贝到mui工程css及fonts目录下，然后即可在mui中引用刚生成的字体图标，我们以选项卡为例，代码如下：

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

<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item mui-active">
        <span class="mui-icon iconfont icon-home"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item">
        <span class="mui-icon iconfont icon-faxian"></span>
        <span class="mui-tab-label">发现</span>
    </a>
    <a class="mui-tab-item">
        <span class="mui-icon iconfont icon-jifenshangcheng"></span>
        <span class="mui-tab-label">积分商城</span>
    </a>
    <a class="mui-tab-item">
        <span class="mui-icon iconfont icon-wode"></span>
        <span class="mui-tab-label">我的</span>
    </a>
</nav>

效果如下：