材质图标cdn在next.js中不起作用

omvjsjqw 于 2023-03-18 发布在其他

关注(0)|答案(4)|浏览(155)

我添加了cdn到next.js头节，但它不工作.

import Head from "next/head";

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

我试图呈现这个简单的图标，但它没有显示任何图标。它只是简单地显示字符串“add”

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

next.js

来源：https://stackoverflow.com/questions/66289475/material-icons-cdn-is-not-working-in-next-js

4条答案

按热度按时间

kupeojn61#

我遇到了同样的问题，下面的工作对我来说：
将GoogleMaterialIcon CSS添加到globals.css文件中，而不是xxxx.module.css文件中。

赞(0）回复(0）举报 2023-03-18

vwoqyblh2#

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

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

赞(0）回复(0）举报 2023-03-18

cbeh67ev3#

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

赞(0）回复(0）举报 2023-03-18

gpfsuwkq4#

这对我很有效

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

赞(0）回复(0）举报 2023-03-18

我来回答

材质图标cdn在next.js中不起作用

4条答案

相关问题

热门标签

最新问答