Materializecss 图标不起作用？

Question

我正在使用 materializecss。但是我无法让图标正常工作它说了这个词但没有显示图标？

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

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

Answer 1

你必须在其中包含图标 link:

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

把这个放在你脑子里的某个地方，它就会起作用！

Answer 2

您可以执行以下步骤来呈现图标 -

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

刷新页面，您会看到图标已经呈现。

谢谢

Answer 3

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

Material 图标的 CDN

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

以下标签可用于指示 material 个图标。

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

要了解更多详情，请参考这位官方link。 Material-icons

以下是一个示例工作代码片段，其中包含几个图标。

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

Answer 4

如果其他人在这里绊倒了，请确保您没有在其他地方设置元素的字体来覆盖图标字体。尤其注意 !importants.

Answer 5

我们也可以通过安装 npm 包来完成这个...

第 1 步：npm i material-design-icons

For more details Click here

第 2 步： 在样式标签下的 angular.json 文件中添加 link 为：

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

Materializecss 图标不起作用？

Materializecss icons not working?

materialize