Google Material Icons 显示文本而不是图标答案

【问题标题】：Google Material Icons showing text instead of iconGoogle Material Icons 显示文本而不是图标
【发布时间】：2019-01-12 03:37:42
【问题描述】：

我不希望在页面无法加载图标库的情况下显示图标文本。例如下面的代码应该显示邀请人图标-

<i style="font-size:16px;color:grey" class="material-icons">person_add</i>

但是当页面由于某种原因无法加载时（比如网络连接速度慢），上面的代码会显示文本 - “person_add”，这看起来很侮辱。这个问题有什么解决方案吗？事实上，即使库不存在，我也不希望文本以任何方式出现。

【问题讨论】：

可以删除 person_add 吗？
不熟悉Material Icons，但是在FontAwesome中，类用于图标。你确定不是这样吗？
@Li357 是的，我确定。 material.io/tools/icons
@rileyjsumner 看在上帝的份上
显示你的标题部分。

标签： jquery css icons google-material-icons

【解决方案1】：

首先清除缓存
然后像这样在你的头部添加链接

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

然后在你的正文部分添加这个

  <i style="font-size:16px;color:grey" class="material-icons">person_add</i>

应该是这样的

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <!--your code-->

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

</head>

<body>
  <!--your code-->

  <i style="font-size:16px;color:grey" class="material-icons">person_add</i>

  <!--your code-->

</body>

</html>

【讨论】：

【解决方案2】：

你的链接有问题：

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

去掉;，在href的开头加上https://：

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

【讨论】：

问题依旧
@KaranParte 你能发布你的整个 html 页面吗？