- 网页图标教程
- Web 图标-主页
- Web 图标 - 简介
- 字体真棒
- 字体真棒图标
- 真棒字体 - 网页图标
- 字体真棒-手形图标
- Font Awesome - 交通图标
- Font Awesome - 性别图标
- Font Awesome - 文件类型图标
- Font Awesome - 旋转图标
- Font Awesome - 表单控件图标
- 字体真棒-付款图标
- Font Awesome - 图表图标
- Font Awesome - 货币图标
- Font Awesome - 文本编辑器图标
- Font Awesome - 方向图标
- Font Awesome - 视频播放器图标
- Font Awesome - 品牌图标
- 字体真棒-医疗图标
- 材质图标
- 材质图标
- 材质-动作图标
- 材料-警报图标
- 材质-AV 图标
- 材料-通信图标
- 材质-内容图标
- 材质-设备图标
- 材质-编辑器图标
- 材质-文件图标
- 材质-硬件图标
- 材质-图像图标
- 材质-地图图标
- 材质-导航图标
- 材质-通知图标
- 材料-社会图标
- 材质 - 切换图标
- Bootstrap 字形
- Bootstrap 字形
- Bootstrap - 组件
- Web 图标有用的资源
- Web 图标 - 快速指南
- 网页图标 - 有用的资源
- Web 图标-讨论
材质-设备图标
本章向您介绍 Google(Material)设备图标的用法。假设custom是我们定义大小和颜色的 CSS 类名称,如下所示。
<!DOCTYPE html> <html> <head> <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet"> <style> i.custom {font-size: 2em; color: green;} </style> </head> <body> <i class = "material-icons custom">accessibility</i> </body> </html>
下表包含 Google 的(Material)设备图标的用法和结果。
用法 | 结果 |
---|---|
<i class="material-icons custom">access_alarm</i> | 访问警报 |
<i class="material-icons custom">access_alarms</i> | 访问警报 |
<i class="material-icons custom">access_time</i> | 访问时间 |
<i class="material-icons custom">add_alarm</i> | 添加警报 |
<i class="material-icons custom">airplanemode_active</i> | 飞机模式_活动 |
<i class="material-icons custom">airplanemode_inactive</i> | 飞机模式_非活动状态 |
<i class="material-icons custom">battery_alert</i> | 电池警报 |
<i class="material-icons custom">battery_charging_full</i> | 电池充电已满 |
<i class="material-icons custom">电池已满</i> | 电池充满 |
<i class="material-icons custom">battery_std</i> | 电池标准 |
<i class="material-icons custom">电池未知</i> | 电池_未知 |
<i class="material-icons custom">蓝牙</i> | 蓝牙 |
<i class="material-icons custom">蓝牙连接</i> | 蓝牙连接 |
<i class="material-icons custom">蓝牙_禁用</i> | 蓝牙_禁用 |
<i class="material-icons custom">蓝牙搜索</i> | 蓝牙搜索 |
<i class="material-icons custom">brightness_auto</i> | 亮度自动 |
<i class="material-icons custom">brightness_high</i> | 亮度高 |
<i class="material-icons custom">亮度_低</i> | 亮度_低 |
<i class="material-icons custom">brightness_medium</i> | 亮度_中 |
<i class="material-icons custom">data_usage</i> | 数据使用 |
<i class="material-icons custom">开发者模式</i> | 开发者模式 |
<i class="material-icons custom">设备</i> | 设备 |
<i class="material-icons custom">dvr</i> | 硬盘录像机 |
<i class="material-icons custom">gps_fixed</i> | GPS_固定 |
<i class="material-icons custom">gps_not_fixed</i> | GPS_不_固定 |
<i class="material-icons custom">gps_off</i> | GPS_关闭 |
<i class="material-icons custom">graphic_eq</i> | 图形_eq |
<i class="material-icons custom">location_disabled</i> | 位置已禁用 |
<i class="material-icons custom">位置搜索</i> | 位置搜索 |
<i class="material-icons custom">network_cell</i> | 网络小区 |
<i class="material-icons custom">network_wifi</i> | 网络_wifi |
<i class="material-icons custom">screen_lock_landscape</i> | 屏幕锁定风景 |
<i class="material-icons custom">screen_lock_portrait</i> | 屏幕锁定肖像 |
<i class="material-icons custom">screen_lock_rotation</i> | 屏幕锁定旋转 |
<i class="material-icons custom">屏幕旋转</i> | 屏幕旋转 |
<i class="material-icons custom">sd_storage</i> | SD_存储 |
<i class="material-icons custom">settings_system_daydream</i> | 设置_系统_白日梦 |
<i class="material-icons custom">signal_cellular_4_bar</i> | signal_cellular_4_bar |
<i class="material-icons custom">wifi_tethering</i> | 无线网络共享 |
<i class="material-icons custom">signal_cellular_no_sim</i> | signal_cellular_no_sim |
<i class="material-icons custom">signal_cellular_null</i> | 信号_蜂窝_空 |
<i class="material-icons custom">signal_cellular_off</i> | 信号_蜂窝_关闭 |
<i class="material-icons custom">signal_wifi_4_bar</i> | signal_wifi_4_bar |
<i class="material-icons custom">signal_wifi_4_bar_lock</i> | signal_wifi_4_bar_lock |
<i class="material-icons custom">signal_wifi_off</i> | wifi信号关闭 |
<i class="material-icons custom">存储</i> | 贮存 |
<i class="material-icons custom">USB</i> | USB |
<i class="material-icons custom">壁纸</i> | 墙纸 |
<i class="material-icons custom">小部件</i> | 小部件 |
<i class="material-icons custom">wifi_lock</i> | 无线网络锁 |
<i class="material-icons custom">signal_cellular_connected_no_internet_4_bar</i> | signal_cellular_connected_no_internet_4_bar |