如何在 React 中加载 IconMoon webfont？答案

【问题标题】：How load IcoMoon webfont in React?如何在 React 中加载 IconMoon webfont？
【发布时间】：2022-01-02 17:10:13
【问题描述】：

如何在 React 中加载 webfont？

将 4 webfont 添加到公用文件夹中

创建字体

@font-face {
  font-family: "IcoMoon";
  src: url("/icons/line-icons-fonts/icomoon.eot");
  src: url("/icons/line-icons-fonts/icomoon.svg") format("svg"),
    url("/icons/line-icons-fonts/icomoon.ttf") format("truetype"),
    url("/icons/line-icons-fonts/icomoon.woff") format("woff");
}

将div 放入a。设置fontFamily 和className。但是图标没有出现，奇怪。我会使用这些图标之一。

https://themekit.dev/docs/code/iconsmind/

<a
  href={`https://www.facebook.com/dialog/share?app_id=2773133082797983&display=popup&href=https://sendmade-portal-vercel.vercel.app/hu/product/${props.productId}&redirect_uri=https://sendmade-portal-vercel.vercel.app/hu/product/${props.productId}&hashtag=#bestGift&quote=EgyMondat`}
>
  <div
    style={{ fontFamily: "IcoMoon" }}
    className={"im-over-time2 text-lg"}
  ></div>
</a>

【问题讨论】：

标签： css reactjs icons

【解决方案1】：

无需手动添加@font-face {...，但需要添加IcoMoon生成的CSS文件才能使用字体。

这是因为图标的类名是在 .css 文件中定义的。

目前在您的情况下，是的，您添加了字体文件，并声明了一个字体，但是在哪里为您的图标 im-over-time2 定义了 CSS 规则？

IcoMoon 创建的 style.css 文件声明了您选择的图标的所有类，类似于：

.icon-blablabla:before {
  content: "\e91c";
}
.icon-youhou:before {
  content: "\e948";
}
.icon-foobar:before {
  content: "\e98d";
}

【讨论】：