Question

我开始研究一个新的Rails 4项目来学习一些MDL。现在我正面临这个问题（见图）。

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title">RubyStore</span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">RubyStore</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">

  </main>
</div>

正如你在左侧看到的那样，而不是抽屉图标，我得到了这个奇怪的方形（为了简单起见，我们只是把它称为正方形......）。但奇怪的是，正如你在开发人员的工具中看到的那样，广场实际上就在那里。

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

下面。看到？可能是什么原因？我正在使用最新的MDL（已下载）和MDL自定义（已下载）。 Ruby 2.3.0，Rails 4.2.5和ERB作为我的模板。

我将两个文件（.css和.js）添加到/app/assets/和相应的文件夹中。风格和行为都有效。我可以点击广场和抽屉滑出完美。

编辑：好的。我检查了实际的MDL示例，它还有<i class="material-icons"></i>代码。所以广场应该在那里。我在<head>中的链接如下所示：

<head>
  <title>Store</title>
  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>

Answer 1

是的，字体丢失了。我认为它是内置在MDL框架的.css文件中是错误的。

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

需要此行，如MDL网站上的入门指南所述。

为什么MDL抽屉（导航）图标是正方形？字体缺少？

1 个答案: