如何在使用 HTML 和 CSS 的网页中使用 Google Material icon 作为列表样式？

简介

Google Material icon 是 Google 推出的一组免费的矢量图标，在我们的网页中使用这些图标，可以让网页看起来更加美观和现代化。

准备工作

首先，我们需要在网页中引入 Google Material icon 的 CSS 文件。可以在头部添加如下代码：

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

同时，需要注意，Google Material icon 只支持现代浏览器，如果你需要支持 IE8 及以下版本的浏览器，需要使用 polyfill。这里不再详细介绍。

在列表中使用 Google Material icon

接下来，我们就可以在列表中使用 Google Material icon 了。

假设我们有一个无序列表，每个列表项都需要显示一个图标。我们可以使用以下代码：

<ul>
  <li><i class="material-icons">check_circle</i> Item 1</li>
  <li><i class="material-icons">check_circle</i> Item 2</li>
  <li><i class="material-icons">check_circle</i> Item 3</li>
</ul>

其中，<i> 标签用于显示图标，class 属性为 "material-icons" ，表示这是一个 Google Material icon，图标名称使用文档中提供的名称，这里使用了 "check_circle"。

类似地，如果需要在有序列表中使用 Google Material icon，可以使用以下代码：

<ol>
  <li><i class="material-icons">filter_1</i> Item 1</li>
  <li><i class="material-icons">filter_2</i> Item 2</li>
  <li><i class="material-icons">filter_3</i> Item 3</li>
</ol>

这里使用了 "filter_1"、"filter_2"、"filter_3" 作为图标名称。

更多用法

除了在列表中使用，Google Material icon 还可以用于按钮、文字中等等。

例如，我们可以通过以下代码在一个按钮中使用 Google Material icon：

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

还可以在任何文本中使用 Google Material icon：

<p>The <i class="material-icons">favorite</i> is my favorite icon!</p>

更多的用法可以参考官方文档：https://material.io/resources/icons/，可以找到所有的图标名称和用法示例。

总结

通过本文介绍，我们知道了如何在使用 HTML 和 CSS 的网页中使用 Google Material icon 作为列表样式。Google Material icon 不仅可以用于列表，还可以用于按钮、文本等等，非常方便。如果想要了解更多，可以查看官方文档。