Materialisecss 图标不起作用？答案

【问题标题】：Materializecss icons not working?Materialisecss 图标不起作用？
【发布时间】：2015-11-22 14:22:22
【问题描述】：

我正在使用materializecss。但是我无法让图标工作它说出单词但不显示图标？

我包含了materializecss和js，但仍然无法正常工作......

有人知道如何解决这个问题吗？

【问题讨论】：

【解决方案1】：

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

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

把它放在你脑海中的某个地方，它就会起作用！

【讨论】：

哦，这是一个陷阱！谢谢！然而，那是怎么回事？我们会以这种方式从谷歌下载东西吗？还是他们只是想跟踪我们正在使用的东西？如果我计划在断开连接的环境（严格安全的 Intranet）上部署我的站点怎么办？

【解决方案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中看到字体url，在浏览器中打开该url就会下载woff2格式的文件。
现在只需将文件复制到字体文件夹中，并将css文件中字体的src更改为指向该文件即可。
删除您在步骤 -1 中包含的链接。

刷新页面，你会看到图标已经渲染了。

谢谢

【讨论】：

非常有用，可以节省时间以避免向 google api 发出太多请求。此外，如果您的网站不需要互联网连接。
只是将我所做的一切供他人参考：转到链接Material+Icons 复制整个内容并保存为css文件。即。 materializeicons.css 然后更新字体文件位置。 src: url('../fonts/materializecss.woff2') format('woff2');。确保字体文件位于 ../fonts/ 文件夹中。即将woff2 Font 下载到字体文件夹。 url 应基于您存储字体文件的位置。

【解决方案3】：

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

素材图标的 CDN

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

以下标签可用于表示素材图标。

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

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

以下是带有少量图标的示例工作代码 sn-p。

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

如果其他人在这里绊倒，请确保您没有将元素的字体设置为覆盖图标字体的其他位置。请特别注意!importants。

【讨论】：

【解决方案5】：

我们也可以通过安装 npm 包来实现...

第 1 步： npm i material-design-icons

For more details Click here

第 2 步： 在 style 标签下的 angular.json 文件中添加链接：

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

【讨论】：