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>
效果如下。