Question

我正在使用materializecss。但是，我无法让图标显示出来，但是它没有显示图标？

我包含了materializecss和js但仍然没有工作......

任何人都知道如何解决这个问题？

Answer 1

您必须在此链接中包含图标：

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

把这个放在你的脑海中它会起作用！

Answer 2

您可以执行以下步骤来渲染图标 -

在您的html页面中添加此链接 - <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
打开浏览器，您将看到该图标已呈现。但我们不希望使用googleapis呈现图标。
打开控制台并转到google apis的src并打开css文件，然后复制整个css并将css添加到css文件或materialize.min.css中。
您将看到刚刚复制的css中的字体网址，在浏览器中打开该网址并下载woff2格式的文件。
现在只需将文件复制到font文件夹中，然后将css文件中字体的src更改为指向该文件。
删除步骤-1中包含的链接。

刷新页面，您将看到该图标已呈现。

谢谢

Answer 3

如果您打算使用图标，请不要忘记添加CDN。如果您不打算使用CDN，则必须下载图标文件并使用您的代码进行映射。

物料图标的CDN

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

以下标记可用于指示素材图标。

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

要了解更多详情，请参阅此官方链接。 Material-icons

以下是一个包含少量图标的示例工作代码段。

＆＃13;

<!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>

＆＃13;

Answer 4

如果其他任何人在这里跌跌撞撞，请确保未将元素的字体设置在其他会覆盖图标字体的位置。尤其要注意!important。

Answer 5

我们还可以通过安装npm软件包来实现此目的...

步骤1： npm i material-design-icons

For more details Click here

第2步：：将样式标签下的angular.json文件内的链接添加为：

"styles": [
  "node_modules/material-design-icons/iconfont/material-icons.css"
]

Materialisecss图标不起作用？

5 个答案: