MaterializeCSS 图标不工作

Question

我在使用 MaterializeCSS 时遇到图标显示问题。我正在使用文档中的基本内容 "Getting Started"，但出于某种原因图标拒绝显示。下面是我使用的代码

<!DOCTYPE html>
<html>

<head>
   <!--Import Google Icon Font-->
   <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <!--Import materialize.css-->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
   <!--Let browser know website is optimized for mobile-->
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
    <nav>
        <ul class="hide-on-med-and-down">
            <li><a href="#!">First Sidebar Link</a></li>
            <li><a href="#!">Second Sidebar Link</a></li>
        </ul>
        <ul id="slide-out" class="side-nav fixed">
            <li class="bold"><a href="#!" class="waves-effect waves-teal">First Sidebar Link</a></li>
            <li class="bold"><a href="#!" class="">Second Sidebar Link</a></li>
            <li class="no-padding">
                <ul class="collapsible collapsible-accordion">
                    <li>
                        <a class="collapsible-header waves-effect waves-teal">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="#!">First</a></li>
                                <li><a href="#!">Second</a></li>
                                <li><a href="#!">Third</a></li>
                                <li><a href="#!">Fourth</a></li>
                            </ul>
                         </div>
                    </li>
                </ul>
            </li>
        </ul>
        <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
  </nav>
  <!--Import jQuery before materialize.js-->
  <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
  <script>
    $('.button-collapse').sideNav({
        menuWidth: 300, // Default is 240
        closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
    });
    $('.collapsible').collapsible();
  </script>
</body>

</html>

所有这些代码试图做的是显示一个导航栏，它是直接从文档中提取的。

调整浏览器大小时汉堡菜单不出现

下拉菜单项旁边没有出现下拉箭头。

我觉得这是我想念的愚蠢的东西，但我已经看了 2 个小时，我的大脑被融化了。任何帮助，将不胜感激。

Answer 1

编辑： 这也是下拉箭头的更新代码：

<i class="material-icons right">arrow_drop_down</i>

我运行也遇到了这个问题，想知道我的汉堡包图标去哪儿了！

不幸的是，他们的很多文档都没有更新，所以你使用的代码有点过时了。

改变这个：

<i class="mdi-navigation-menu"></i>

对此：

<i class="material-icons">menu</i>

您应该会看到该图标。如果您查看他们的源代码，您会发现即使他们的站点也使用与他们的文档不同的更新代码：

Answer 2

在链接字体库中将 HTTP 更改为 HTTPS。它对我有用。

MaterializeCSS 图标不工作

MaterializeCSS Icons not working

html

css

materialize