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

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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

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

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

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

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

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

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

  • удалите ссылку, указанную в шаге -1. ​​

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

Спасибо

Ответ 3

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

Ответ 4

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