材质图标 cdn 在 next.js 中无法工作

问题描述 投票：0回答：5
css next.js cdn head google-material-icons
5个回答
3
投票

我遇到了同样的问题，以下方法对我有用：

将 Google Material Icon CSS 添加到 globals.css 文件而不是 xxxx.module.css。我这样做后，图标名称起作用了

0
投票

我发现的解决方法是使用代码点而不是图标名称：

<Head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
rel="stylesheet" />
</Head>
<span className="material-icons">&#xe145;</span>
0
投票

我通过禁用字体优化解决了这个问题：https://nextjs.org/docs/basic-features/font-optimization

0
投票

这对我有用

// global.scss
@import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,1,0';
0
投票

我遇到了同样的问题，并使用普通的 

head
标签修复了它，而不是从 
"next/head"

导入它 
<head>
  <link
    href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
    rel="stylesheet"
  />
</head>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.