Material Design Lite字体问题

Question

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

   <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

字体设置不包含在材料设计lite css（material.min.css）中 要设置图标字体，请查看material-design-icons/

  

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

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

这可能是第一次开始。如果您不喜欢这样做，请查看不同的方法，例如自托管

或使用MDL styles上解释的 Spritesheets ：

  

材质设计图标包含我们包含的每个图标类别的SVG和CSS精灵。这些可以在sprite目录中的svg-sprite和css-sprite下找到。