Mint-UI 使用阿里 iconfont

Mint-UI自带icon介绍

Mint-UI中提供了七种不同的icon供开发人员使用，可以通过在标签中引入图标样式使用。

<i class="mintui mintui-search"></i>
<i class="mintui mintui-more"></i>
<i class="mintui mintui-back"></i>
<i class="mintui mintui-field-error"></i>
<i class="mintui mintui-field-warning"></i>
<i class="mintui mintui-success"></i>
<i class="mintui mintui-field-success"></i>

七种图标对应如下

某些Mint -UI的组件亦可通过组件中自带的 icon 属性使用图标。

<mt-cell title="标题文字" icon="more" value="带 icon"></mt-cell>

效果如下

使用iconfont

虽然Mint-UI提供了七种icon，但这些必定不能满足一个正常程序的需要，于是来到iconfont，但要注意一点的是，选择自己所需的图标后，在管理页面中，需要在编辑项目页面里，将 FontClass/Symbol 前缀和 Font Family 两个地方里的内容，修改为 mintui-。

修改完成后，生成图标代码，便可以引入到自己项目中了，可以直接通过连接进行引入，亦可下载到本地进行引入，这里就以本地引入作为示例。

①在页面中将图标样式下载到本地

②将下载后的压缩文件解压，并将解压出来的文件，拷贝至项目目录中去。

③在项目 src 目录下的 main.js 中将样式引入到项目中。

import './assets/icon/iconfont.css'

这个地方提醒一下，因为之后是想将新引入的 icon 图标，能和之前 Minit-UI 自带的图标使用方法一样，并且让 Mini-UI 组件 icon 属性也能使用新引入的图标，故在 inconfont 中将前缀改为 mintui ，并且在引入的时候使用的是 Font Class 的方式引入的，具体关于图标样式的不同引用方式说明，可在 inconfont 中找到使用帮助（使用说明链接）。

引入完成后，接下来就可以在项目中尽情使用了，如果不改前缀，使用的时候需要将 class 属性里面的 mintui- 替换为你自己的前缀，并且 Mint-UI 组件的 icon 不能直接使用新引入的图标样式，因为 Mint-UI 会在编译时自行在值前面加上 mintui- 。

<i class="mintui mintui-lishi"></i>
<mt-cell title="标题文字" icon="qiapian" value="带 icon"></mt-cell>

效果如下。