Material Design Lite Font Issue

Question

Я начал разрабатывать новый веб-сайт, используя визуальную студию в качестве среды разработки. В диспетчере пакетов 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

Настройка шрифта не включена в конструкцию материалов lite css (material.min.css).
Чтобы установить значок шрифты имеют вид на material-design-icons/

Самый простой способ создать значок шрифтов для использования в любой веб-страницы с помощью Google Web Fonts. Все, что вам нужно сделать, это включить в одну строку HTML:

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

Это может быть первый запуск. Если это не то, что вы хотите сделать, посмотрите на различные методы, такие как Я хостинг

Или использовать Spritesheets объяснить MDL styles:

Материал Дизайн иконки поставляются с SVG и CSS спрайтов для каждая категория иконки мы включаем. Их можно найти в каталоге спрайтов, в разделе svg-sprite и css-sprite.