📌  相关文章
📜  谷歌素材图标 - Html (1)

📅  最后修改于: 2023-12-03 14:57:46.175000             🧑  作者: Mango

谷歌素材图标 - HTML

介绍

谷歌素材图标是谷歌提供的一套免费图标，可以用于网站、应用程序等的设计中，它包含了各种类型的图标，如标志、按钮、导航、通知等等。这些图标可以通过 HTML 代码进行引用并显示在网页中。

使用方法
引入样式

在HTML文件的头部引入以下代码：

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

此代码用于加载图标的字体文件。

使用图标

在 HTML 文件中，可以使用以下代码来引用谷歌素材图标：

<i class="material-icons">icon_name</i>

其中，icon_name 是要使用的图标名称，可以在谷歌官网上查找。

例如，要在页面上显示一个下载的图标，可以使用以下代码：

<i class="material-icons">cloud_download</i>
自定义样式

还可以通过 CSS 来自定义图标样式，例如更改颜色、大小等。

.material-icons {
  font-size: 36px;
  color: #333333;
}
示例
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>谷歌素材图标示例</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
      .material-icons {
        font-size: 72px;
        color: #ff0000;
      }
    </style>
  </head>
  <body>
    <i class="material-icons">favorite</i>
    <i class="material-icons">face</i>
    <i class="material-icons">directions_bike</i>
  </body>
</html>

效果如下：

Google Material Icons 示例

结论

谷歌素材图标可以为网页和应用程序的设计提供便利，使用它可以使界面更美观、更易于阅读。它不仅免费，而且使用方法简单，只需引入样式和使用 HTML 代码即可在网页中使用。