- Font Awesome
- Font Awesome 图标
- Font Awesome - 网页图标
- Font Awesome - 手部图标
- Font Awesome - 交通工具图标
- Font Awesome - 性别图标
- Font Awesome - 文件类型图标
- Font Awesome - 加载动画图标
- Font Awesome - 表单控件图标
- Font Awesome - 支付图标
- Font Awesome - 图表图标
- Font Awesome - 货币图标
- Font Awesome - 文本编辑器图标
- Font Awesome - 方向图标
- Font Awesome - 播放器图标
- Font Awesome - 品牌图标
- Font Awesome - 医疗图标
- Material Icons
- Material Icons
- Material - 动作图标
- Material - 警报图标
- Material - 音视频图标
- Material - 通信图标
- Material - 内容图标
- Material - 设备图标
- Material - 编辑器图标
- Material - 文件图标
- 物料 - 硬件图标
- Material - 图片图标
- Material - 地图图标
- Material - 导航图标
- Material - 通知图标
- Material - 社交图标
- Material - 切换图标
- Bootstrap Glyphicons
- Bootstrap Glyphicons
- Bootstrap - 组件
- 网页图标实用资源
- 网页图标 - 快速指南
- 网页图标 - 实用资源
- 网页图标 - 讨论
物料 - 硬件图标
本章解释 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">cast</i> | cast |
<i class="material-icons custom">cast_connected</i> | cast_connected |
<i class="material-icons custom">computer</i> | computer |
<i class="material-icons custom">desktop_mac</i> | desktop_mac |
<i class="material-icons custom">desktop_windows</i> | desktop_windows |
<i class="material-icons custom">developer_board</i> | developer_board |
<i class="material-icons custom">device_hub</i> | device_hub |
<i class="material-icons custom">dock</i> | dock |
<i class="material-icons custom">gamepad</i> | gamepad |
<i class="material-icons custom">headset</i> | headset |
<i class="material-icons custom">headset_mic</i> | headset_mic |
<i class="material-icons custom">keyboard</i> | keyboard |
<i class="material-icons custom">keyboard_arrow_down</i> | keyboard_arrow_down |
<i class="material-icons custom">keyboard_arrow_left</i> | keyboard_arrow_left |
<i class="material-icons custom">keyboard_arrow_right</i> | keyboard_arrow_right |
<i class="material-icons custom">keyboard_arrow_up</i> | keyboard_arrow_up |
<i class="material-icons custom">keyboard_backspace</i> | keyboard_backspace |
<i class="material-icons custom">keyboard_capslock</i> | keyboard_capslock |
<i class="material-icons custom">keyboard_hide</i> | keyboard_hide |
<i class="material-icons custom">keyboard_return</i> | keyboard_return |
<i class="material-icons custom">keyboard_tab</i> | keyboard_tab |
<i class="material-icons custom">keyboard_voice</i> | keyboard_voice |
<i class="material-icons custom">laptop</i> | laptop |
<i class="material-icons custom">laptop_chromebook</i> | laptop_chromebook |
<i class="material-icons custom">laptop_mac</i> | laptop_mac |
<i class="material-icons custom">laptop_windows</i> | laptop_windows |
<i class="material-icons custom">memory</i> | memory |
<i class="material-icons custom">mouse</i> | mouse |
<i class="material-icons custom">phone_android</i> | phone_android |
<i class="material-icons custom">phone_iphone</i> | phone_iphone |
<i class="material-icons custom">phonelink</i> | phonelink |
<i class="material-icons custom">phonelink_off</i> | phonelink_off |
<i class="material-icons custom">power_input</i> | power_input |
<i class="material-icons custom">router</i> | router |
<i class="material-icons custom">scanner</i> | scanner |
<i class="material-icons custom">security</i> | security |
<i class="material-icons custom">sim_card</i> | sim_card |
<i class="material-icons custom">smartphone</i> | smartphone |
<i class="material-icons custom">speaker</i> | speaker |
<i class="material-icons custom">speaker_group</i> | speaker_group |
<i class="material-icons custom">tablet</i> | tablet |
<i class="material-icons custom">tablet_android</i> | tablet_android |
<i class="material-icons custom">tablet_mac</i> | tablet_mac |
<i class="material-icons custom">toys</i> | toys |
<i class="material-icons custom">tv</i> | tv |
<i class="material-icons custom">watch</i> | watch |
广告