Значки Materialisecss не работают?

Я использую материализекс. Но я не могу заставить значки работать, он говорит слово, но не показывает значок?

Я включил materializecss и js, но все равно не работает...

Кто-нибудь знает, как это исправить?


materialize
person Aapje    schedule 22.11.2015    source источник

Ответы (5)


arrow_upward
48
arrow_downward

вы должны включить значки с этой ссылкой:

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

поместите это где-нибудь в своей голове, и это сработает!

person C.Schubert    schedule 22.11.2015
comment
О, это хит! Спасибо! Впрочем, о чем это? Скачиваем ли мы что-то из Google таким образом? Или они просто хотят отслеживать, что мы используем? Что, если я планирую развернуть свой сайт в автономной среде (интранет со строгой безопасностью)? - person Konrad Viltersten; 14.11.2016

arrow_upward
5
arrow_downward

Вы можете выполнить следующие шаги для отображения значка:

  1. добавьте эту ссылку на свою html-страницу - <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  2. откройте браузер, и вы увидите, что значок отобразился. но мы не хотим, чтобы значок отображался с помощью googleapis.

  3. откройте консоль и перейдите в src google apis, откройте файл css, скопируйте весь css и добавьте css в файл css или materialize.min.css.

  4. вы увидите URL-адрес шрифта в только что скопированном css, откройте этот URL-адрес в браузере, и файл формата woff2 будет загружен.

  5. теперь просто скопируйте файл в папку шрифтов и измените src шрифта в файле css, чтобы он указывал на этот файл.

  6. удалите ссылку, которую вы включили в шаге -1.

обновите страницу, вы увидите, что значок отобразился.

Спасибо

person Ujjwal Kumar Gupta    schedule 10.04.2017
comment
Очень полезно, чтобы сэкономить время, чтобы не делать слишком много запросов к API Google. Также, если вашему сайту не требуется подключение к Интернету. - person Alejandro Bastidas; 12.02.2018
comment
Просто чтобы указать все, что я сделал для справки: перейдите по ссылке Material+Icons Скопируйте все содержимое и сохраните как файл css. а именно materializeicons.css Затем обновите расположение файла шрифта. src: url('../fonts/materializecss.woff2') format('woff2');. Убедитесь, что файл шрифта находится в папке ../fonts/. т. е. Загрузите шрифт woff2 в папку шрифтов. URL-адрес должен основываться на том, где вы храните файл шрифта. - person Doogle; 14.10.2018

arrow_upward
0
arrow_downward

Если вы собираетесь использовать значок, не забудьте добавить CDN. Если вы не собираетесь использовать CDN, вам необходимо загрузить файлы значков и сопоставить их с вашим кодом.

CDN для значков материалов

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

Для обозначения значков материала можно использовать следующие теги.

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

Чтобы получить более подробную информацию, перейдите по этой официальной ссылке. значки материалов

Ниже приведен пример фрагмента рабочего кода с несколькими значками.

<!DOCTYPE html>
<html>

	<head>
	  <title>ICON</title>
	  <!-- include material-icons -->
	  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	  <!--Let browser know website is optimized for mobile-->
	  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	</head>

	<body class="row">
			<div class="col s12" >          
				<i class="material-icons">add</i>
				<i class="material-icons">thumb_up</i>
				<i class="material-icons">shopping_cart</i>
				<i class="material-icons">perm_identity</i>			
			</div>
	</body>

</html>

person Sandun Madola    schedule 11.07.2017

arrow_upward
0
arrow_downward

Если кто-то еще споткнется здесь, убедитесь, что вы не устанавливаете шрифт элемента где-то еще, который переопределяет шрифт значка. Будьте особенно осторожны с !importants.

person Karuhanga    schedule 09.06.2019

arrow_upward
0
arrow_downward

Мы также можем сделать это, установив пакет npm...

Шаг 1: npm i material-design-icons

Для получения дополнительной информации нажмите здесь

Шаг 2. Добавьте ссылку в файл angular.json под тегом стиля следующим образом:

"styles": [
  "node_modules/material-design-icons/iconfont/material-icons.css"
]
person Mabd    schedule 20.09.2020