图标库地址
http://www.iconfont.cn/
创建项目
点击 图标管理 -> 我的项目
新建项目
选择图标
下载图标
使用图标
修改 iconfont.css
默认的 CSS
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1520261222831'); /* IE9*/
src: url('iconfont.eot?t=1520261222831#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=1520261222831') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1520261222831#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: "\e6b8"; }
.icon-my_light:before { content: "\e7d5"; }
.icon-search_light:before { content: "\e7da"; }
.icon-video_light:before { content: "\e7e9"; }
修改后的 CSS
- 为保证和 mui 目录结构统一，建议将字体文件放在 fonts 目录下，这样我们需要修改 @font-face 下的 url 属性；
- 只兼容 iOS 和 Android 版本的话，我们仅需要 ttf 格式的字体即可，其它字体可以删除；同时，我们也仅需保留-webkit前缀语法，-moz前缀部分可以删除；
@font-face {
font-family: "iconfont";
src: url('iconfont.eot?t=1520261222831');
src: url('iconfont.eot?t=1520261222831#iefix') format('embedded-opentype'),
url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), url('iconfont.ttf?t=1520261222831') format('truetype'),
url('iconfont.svg?t=1520261222831#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.icon-home:before {
content: "\e6b8";
}
.icon-my_light:before {
content: "\e7d5";
}
.icon-search_light:before {
content: "\e7da";
}
.icon-video_light:before {
content: "\e7e9";
}
将字体文件复制到项目
image.png
集成 MUI
将 iconfont.css 及 iconfont.ttf 两个文件分别拷贝到 mui 工程 css 及 fonts 目录下，然后即可在 mui 中引用刚生成的字体图标，我们以选项卡为例，代码如下：
效果图
image.png