阅读(3724) (1)

图标

2017-05-24 04:27:24 更新

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 使图标位于按钮右侧