使用Materialize框架时收藏按钮显示文字而非心形图标求助

我太懂你现在的心情了——本来想做一个带心形图标的收藏按钮，结果页面上却显示干巴巴的文字“favorite”，这确实有点扫兴。咱们一步步来排查解决这个问题：

• 首先，确认Material Icons字体是否正确引入
  Materialize的图标依赖Google的Material Icons字体文件，如果没在页面里引入它，浏览器就没法渲染出图标，只能显示图标对应的文字名称。你需要在HTML的<head>标签里添加这段代码：

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

• 检查Materialize核心文件的加载顺序和完整性
  Materialize的组件（包括图标渲染）依赖jQuery和自身的CSS、JS文件，而且加载顺序不能乱：先引入jQuery，再引入Materialize的CSS，最后引入Materialize的JS。如果顺序错了或者文件没加载成功，也可能导致图标异常。推荐的引入代码如下：

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- Materialize CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <!-- Materialize JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  

• 核对图标元素的类名是否正确
  你的代码里图标标签是<i class="material-icons">favorite</i>，这个类名material-icons必须准确，少个字母或者打错字都不行，比如写成material-icon就会导致图标无法渲染。

• 尝试强制刷新浏览器缓存
  有时候浏览器会缓存旧的资源文件，导致字体文件没更新加载。可以按下Ctrl+Shift+R（Windows/Linux）或者Cmd+Shift+R（Mac）强制刷新页面，清除缓存后再看看效果。

给你一个完整的示例代码，你可以参考着调整自己的页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smoothie Card</title>
    <!-- Material Icons字体引入 -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Materialize CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <!-- Materialize JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
    <div class="card-content">
        <span class="card-title">Blueberries & coconut smoothie</span>
        <a href="" class="favorite-btn btn-floating pink pulse">
            <i class="material-icons">favorite</i>
        </a>
    </div>
</body>
</html>

按照上面的步骤排查调整，应该就能顺利显示心形图标啦！

内容的提问来源于stack exchange，提问作者Khalid AL Bitar