Google 字体图标简介
创建于 2024-12-03 /
23
字体：
[默认]
[大]
[更大]
基本图标
要使用谷歌图标，请在 HTML 页面的 <head> 部分添加以下行:
<link rel="stylesheet" href="/fonts/icon.asp?family=Material+Icons">
注释: 无需下载或安装!
将 material-icons 类添加到内联元素并插入图标的名称:
实例
实例代码:
<!DOCTYPE html><html>
<head>
<link rel="stylesheet" href="/fonts/icon.asp?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 字体大小属性是个例外，除非指定了其他内容，否则它总是 24px。
虽然图标可以缩放到任意大小，但建议的 font-size 字体大小为18、24、36 或 48px:
实例
实例代码:
<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 亲自试一试 »
0 人点赞过
