谷歌材料图标显示文本而不是图标

Question

谷歌材料图标显示文本而不是图标

4

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

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

但是当页面由于某些原因(如网络连接缓慢)无法加载时，上述代码会显示文本-"person_add"，这看起来非常侮辱人。是否有解决此问题的方法，实际上，即使库不存在，我也不希望以任何方式出现该文本。

- Karan Parte

你能删除 person_add 吗？ - rileyjsumner

不熟悉Material Icons，但熟悉FontAwesome，类用于图标。你确定这不是这种情况吗？ - Andrew Li

@Li357 是的，我确定。https://material.io/tools/icons/ - Karan Parte

@rileyjsumner 求你了，拜托了。 - Karan Parte

显示您的标题部分。 - Coral Kashri

@KorelK 你的意思是在<head>部分的库中吗？这就是 - <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> - Karan Parte

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Coral Kashri · Answer 1

您的链接存在问题:

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

- letthelordbewithyou · Answer 2

首先清除缓存，然后在头部区域添加如下链接。

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