Как подключить иконочный шрифт Material Design Icons локально?

Question

[gregorypetrov]

Добрый вечер, коллеги!

Есть такой иконочный шрифт - Material Design Icons ( https://material.io/icons/ ). Скачал его в виде единого ttf файла.

В CSSке добавил:

@font-face {
    font-family : 'MaterialIcons';
    src         : url('/fonts/MaterialIcons-Regular.ttf');
    src         : url('/fonts/MaterialIcons-Regular.ttf')
    format('woff'), url('/fonts/MaterialIcons-Regular.ttf') format('truetype');
    font-weight : normal;
    font-style  : normal;
}

1) Как подключить его (локально), чтобы можно было назначать его иконки div'ам примерно таким образом -

.div-button-download:before {
  font-family: 'Material Icons';
  content: "\f006";
}

2) И где можно выяснить значения этих самых кодов, соответствующих нужной иконке, вроде

"\f006";

?

Заранее спасибо за ответы!

Answer 1

[Egor]

Для подключения локально:
1) Скачать архив link in github.
2) Извлечь папку «iconfont» и положить в проект (684 КБ).
3) Подключить. Например через HTML:

<link href="fonts/iconfont/material-icons.css" rel="stylesheet">

4) Выбрать и добавить иконку в HTML:

<i class="material-icons">settings_input_svideo</i>

5) Стилизовать:

.material-icons {
    color: #ffffff; 
    font-size: 24px;
}

Answer 2

[Alexandr Alexandrov]

Загружено не то, шрифт состоит не только из одного *.ttf файла.

Или загружаете всё к себе,

git clone http://github.com/google/material-design-icons/

или берёте по ссылке

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

Подробнее google.github.io/material-design-icons/#icon-font-...

Answer 3

[Александр Калинин]

<link href="https://cdn.materialdesignicons.com/3.8.95/css/materialdesignicons.min.css"
          rel="stylesheet">

Вместо 3.8.95 ставь нужную версию

Answer 4

[fv_mebel]

https://materialdesignicons.com/cdn/2.0.46/
тут полный список этих иконок