Material Design Lite字體問題

我開始用Visual Studio作爲開發環境開發一個新的網站。在nuget包管理器中，我在項目中添加了「Material Design Lite」。我剛開始測試一些組件，並得到一個問題。這是我想要實現的菜單的代碼。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>

其結果是我得到：

正如您在左上角看到它只是描述純文本而不是正確的符號。

如何解決這個問題？謝謝。

來源

2016-04-30 Matthias Herrmann

請問您可以發佈菜單項的CSS？ – Sarcoma

@Sarcoma它是圖標menue http://www.material-ui.com/#/components/icon-menu –

字體設置不包含在材質設計lite css（material.min.css）中。
要設置圖標，字體，看一下material-design-icons/

最簡單的方法來設置圖標字體在任何網頁的用途是通過谷歌的Web字體。所有你需要做的是包括HTML單行：

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

這可能是第一次啓動。如果這不是你喜歡做看看了不同的方法，如自託管

或者使用Spritesheets什麼上MDL styles解釋說：

材料設計的圖標來使用SVG和CSS精靈的我們包括的每一類圖標。這些可以在sprites目錄的svg-sprite和css-sprite下找到。

來源

2016-05-01 09:06:19

Material Design Lite字體問題

回答

相關問題