Material Design Lite 字体问题答案

【问题标题】：Material Design Lite Font IssueMaterial Design Lite 字体问题
【发布时间】：2016-04-30 20:58:06
【问题描述】：

我开始使用 Visual Studio 作为开发环境来开发一个新网站。在 nuget 数据包管理器中，我将“Material Design Lite”添加到我的项目中。我刚开始测试一些组件，但遇到了一个问题。这是我想要实现的菜单代码。

   <div>
    <!-- Left aligned menu below button -->
    <button id="demo-menu-lower-left"
            class="mdl-button mdl-js-button mdl-button--icon">
        <!-- Intellisense doesn't suggest that font color I just just c&p-->
        <i style="font-family:Roboto Mono" class="material-icons">more_vert</i>
    </button>
    <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
        for="demo-menu-lower-left">
        <li class="mdl-menu__item">Some Action</li>
        <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
        <li disabled class="mdl-menu__item">Disabled Action</li>
        <li class="mdl-menu__item">Yet Another Action</li>
    </ul>
</div>

在我的 html 头中：<link href="Content/mdl-v1.1.2/material.min.css" rel="stylesheet" />

在体内：

   <script src="Content/mdl-v1.1.2/material.min.js"></script>
   <script src="Scripts/angular.min.js"></script>

结果我得到：

正如您在左上角看到的，它只是显示纯文本而不是正确的符号。

如何解决这个问题？谢谢。

【问题讨论】：

能否请您发布菜单项的css？
@Sarcoma 这是图标菜单material-ui.com/#/components/icon-menu

标签： html css material-design-lite

【解决方案1】：

material design lite css (material.min.css) 中不包含字体设置。
要设置图标字体，请查看material-design-icons/

设置用于任何网页的图标字体的最简单方法是通过 Google Web Fonts。您需要做的就是包含一行 HTML：

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

这可能是第一次开始。如果这不是您喜欢做的事情，请查看不同的方法，例如 Self hosting

或者使用MDL styles上解释的Spritesheets：

Material Design 图标为我们包含的每个图标类别附带 SVG 和 CSS sprite。这些可以在 sprites 目录中的 svg-sprite 和 css-sprite 下找到。

【讨论】：