Question

我在使用MaterialiseCSS时遇到显示图标的问题。我正在使用裸骨＆＃34;入门＆＃34;从文档中，但无论出于何种原因，图标拒绝显示。以下是我使用

的代码

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

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

调整浏览器大小时，汉堡包菜单不会显示 No Hamburger Icon

下拉菜单项旁边没有下拉箭头。 Dropdown Missing

我觉得我有点愚蠢，但是我已经看了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 。它对我有用。

MaterialiseCSS图标不起作用

2 个答案: