材料设计图标 - HTML

材料设计图标是谷歌所推出的设计语言的一部分，它提供了一套符合人类审美、易于辨认且方便使用的图标集合，可在网页设计中使用。如果您正在开发Web应用或网页，使用材料设计图标非常有效且高效。

引入材料设计图标

要使用材料设计图标，需先将其添加到HTML页面中。可使用以下代码：

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

请注意，该代码片段需在页面头部引用。这会向页面添加材料设计图标的CSS样式和Web字体，以便使用图标。

使用材料设计图标

在页面中使用材料设计图标，需为HTML元素添加CSS样式。在CSS样式中，使用变量font-family: 'Material Icons', sans-serif;来设置字体。

假设您要向页面添加一个“search”图标，可以使用以下代码：

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

注意：在<i>元素中，通过class="material-icons"引用图标，然后在标签内添加要使用的图标名称（例如“search”）。

您可以在以下链接中找到所有可用的材料设计图标：

• 材料设计图标

自定义材料设计图标

材料设计图标是可定制的，可以修改其颜色、大小和提示文字。以下是自定义材料设计图标的方法：

更改图标颜色

要更改图标颜色，请在CSS中使用color属性，例如：

<i class="material-icons" style="color:red;">close</i>

上述代码将以红色显示一个“close”图标。

更改图标大小

要更改图标大小，请在CSS中使用font-size属性，例如：

<i class="material-icons" style="font-size:48px;">info</i>

上述代码将显示一个大小为48px的“info”图标。

添加提示文字

要添加图标的提示文字（tooltip），请使用title属性，例如：

<i class="material-icons" title="我是提示文字">help</i>

上述代码将显示一个“help”图标，并在鼠标悬停时显示提示文字：“我是提示文字”。

结论

使用材料设计图标可为您的Web应用或网页增添精美且易于使用的设计元素。在页面中使用这些图标非常容易，只需使用简单的HTML和CSS。