codecamp

图标

MDUI 内置了 Material Icons 的 932 个图标，除了这些图标，你也可以使用第三方的图标。

相关资源

Material Design 图标设计规范

使用示例

我们列出了所有 Material Icons 的图标，你可以直接点击图标复制图标代码。

www.mdui.org - 图标 - 使用示例

如果图标用在扁平按钮或浮动按钮中，还需要添加类 mdui-icon-left 或 mdui-icon-right 使图标位于按钮左侧或右侧。

www.mdui.org - 图标 - 在按钮中的使用示例

第三方图标库

要使用第三方图标库，需要先引入第三方图标库的 CSS 文件。

然后在 <i> 元素中添加类 mdui-icon 和对应图标库的类名。

下面的实例使用的是 ionicons 的图标。

www.mdui.org - 图标 - 使用第三方图标库

CSS 类名列表

类名	效果
.mdui-icon	定义图标元素
.material-icons	定义 Material Icons 图标元素
.mdui-icon-left	使图标位于按钮左侧
.mdui-icon-right	使图标位于按钮右侧

温馨提示

下载编程狮App，免费阅读超1000+编程语言教程

取消

确定

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }