@gregorypetrov

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

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

Есть такой иконочный шрифт - 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";

?

Заранее спасибо за ответы!
  • Вопрос задан
  • 17632 просмотра
Пригласить эксперта
Ответы на вопрос 4
Softwider
@Softwider
Для подключения локально:
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;
}
Ответ написан
Комментировать
Загружено не то, шрифт состоит не только из одного *.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-...
Ответ написан
Комментировать
kentovsky
@kentovsky
php, js, mysql разработчик
<link href="https://cdn.materialdesignicons.com/3.8.95/css/materialdesignicons.min.css"
          rel="stylesheet">

Вместо 3.8.95 ставь нужную версию
Ответ написан
Комментировать
@fv_mebel
https://materialdesignicons.com/cdn/2.0.46/
тут полный список этих иконок
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы