Google 图标 介绍
基本图标
要使用 Google 图标，请在 HTML 页面的 <head> 部分添加以下行：
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
注意：无需下载或安装！
将 material-icons 类添加到内联元素并插入图标名称
示例
以下代码
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons" style="font-size:48px;">cloud</i>
<i class="material-icons" style="font-size:60px;color:red;">cloud</i>
</body>
</html>
结果显示
cloud cloud cloud
自己试试 »
Google 图标设计用于内联元素。<i> 和 <span> 元素广泛用于图标。
注意： Material 图标默认大小为 24px。
另请注意，如果更改图标容器的颜色，图标的颜色也会随之改变。对于阴影以及任何通过 CSS 继承的其他属性，情况也一样。例外是 CSS 的 font-size 属性，它始终为 24px，除非另有指定。
可调整大小的图标
虽然 Material 图标可以缩放到任何大小，但推荐的字体大小为 18、24、36 或 48 像素
示例
以下代码
<style>
/* 图标大小规则：*/
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; } /* 默认 */
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
</style>
<i class="material-icons md-18">cloud</i>
<i class="material-icons md-24">cloud</i>
<i class="material-icons md-36">cloud</i>
<i class="material-icons md-48">cloud</i>
结果显示
cloud cloud cloud cloud
自己试试 »
