如何在网页中使用素材图标

【问题标题】：How can I use material icon in the web page如何在网页中使用素材图标
【发布时间】：2022-01-07 05:18:49
【问题描述】：

我加了

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

致index.html

但我无法在网页上显示图标，它会将图标名称显示为字符串。

我试过了

<span class="material-icons-outlined">
  done
</span>

但它不起作用。

【问题讨论】：

将类从“material-icons-outlined”更改为“material-icons”
我做到了，但它不起作用

标签： html css google-material-icons

【解决方案1】：

您可以使用此代码在网页上显示 Material 图标

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

示例

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

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

【讨论】：

是的，非常感谢。非常好的答案和我正在寻找的东西。