W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

Google 图标简介



基本图标

若要使用谷歌图标,请在HTML页的 <head> 部中添加以下行:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

注意: 不需要下载或安装!

material-icons 类添加到内联元素并插入图标名称:

Example

The following code:

<!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>

Results in:

cloud cloud cloud
尝试一下 »

Google图标旨在与内联元素一起使用。<i><span> 元素广泛用于图标。

注意: 默认情况下,Material icons为24像素。

还要注意,如果更改图标容器的颜色,图标的颜色也会改变。


大图标

虽然material icons可以缩放为任何尺寸,但建议的字体大小为18,24,36或48像素:

Example

The following code:

<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>

Results in:

cloud cloud cloud cloud
尝试一下 »