最新的Web开发教程
 

谷歌图标简介


基本图标

要使用谷歌的图标,添加内以下行<head> HTML页面的部分:

<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
试一试»

谷歌图标被设计成与内联元素被使用。 在<i><span>元素被广泛用于图标。

注:材料的图标默认情况下,24px的。

还要注意的是,如果你改变图标的​​容器的颜色,图标的颜色也会发生变化。 同样的事情也适用于阴影,和其他任何被使用CSS继承。 唯一的例外是CSS font-size属性,这始终是24px的,除非指定别的东西。


相当大的图标

虽然该材料的图标可以缩放到任何尺寸,建议的字体大小可以是18,24,36或48像素的:

下面的代码:

<style>
/* Rules for icon sizes: */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; } /* Default */
.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
试一试»