Material Design Lite Font Ausgabe

Question

Ich begann mit der Entwicklung einer neuen Website, indem ich Visual Studio als Entwicklungsumgebung verwendete. Im nugget packet Manager habe ich "Material Design Lite" zu meinem Projekt hinzugefügt. Ich habe gerade begonnen, einige Komponenten zu testen, und ich habe eine Ausgabe bekommen. Hier ist der Code des Menüs, den ich implementieren wollte.

<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> 

In meinem html Kopf: <link href="Content/mdl-v1.1.2/material.min.css" rel="stylesheet" />

im Körper:

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

Als Ergebnis erhalte ich:

Wie Sie oben links sehen Es zeigt nur Klartext und nicht das richtige Symbol.

Wie behebt man das? Danke in Bezug auf.

Answer 1

Das Font-Setup ist nicht in der Material Design Lite css (material.min.css) enthalten.
Um Setup das Symbol Schriftarten einen Blick auf material-design-icons/

Der einfachste Weg, Symbol Schriftarten für die Verwendung in einer beliebigen Web-Seite einzurichten, ist durch Google Web Fonts. Alles, was Sie tun müssen, ist eine einzige Zeile HTML umfassen:

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

Dies ist ein erster Anfang sein könnte. Wenn dies nicht das, was Sie sich für die verschiedenen Methoden wie Selbst

Hosting zu tun haben, wie: Nutzen Sie Spritesheets erklärt auf MDL styles:

Material Design-Symbole sind mit SVG und CSS-Sprites für jede Kategorie von Symbolen, die wir enthalten. Diese finden Sie im Verzeichnis sprites unter svg-sprite und css-sprite.