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

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

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

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

7
materialize

3 ответов

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

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

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

28

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

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

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

  3. откройте консоль и перейдите в src Google apis и откройте файл css, скопируйте весь css и добавьте css в файл css или материализовать.минута.стиль CSS.

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

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

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

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

спасибо

2

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