Material Design Lite 字体问题

Question

我开始使用 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>

我得到的结果是：

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

如何解决？谢谢。

Answer 1

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

The easiest way to set up icon fonts for use in any web page is through Google Web Fonts. All you need to do is include a single line of HTML:

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

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

或使用 Spritesheets MDL styles 上的解释：

Material Design icons come with SVG and CSS sprites for each category of icon we include. These can be found in the sprites directory, under svg-sprite and css-sprite.

Material Design Lite 字体问题

Material Design Lite Font Issue

html

css

material-design-lite