Question

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

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

但是当页面由于某种原因（例如互联网连接速度慢）而无法加载时，上面的代码将显示文本-“ person_add”，这看起来非常侮辱。有没有解决这个问题的方法，实际上我不希望即使图书馆不存在也无法以任何方式显示文本。

Answer 1

您的链接有问题：

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

删除;，并在https://的开头添加href：

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

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>

Google物料图标显示文字而不是图标

2 个答案: