Unicode CSS 字体真棒图标在 React 中呈现为框

Question

我在 create-react-app 中使用 jPlayer example。这是一个 CodeSandbox，显示了字体真棒图标呈现为框的问题。

图标通过 css 规则呈现，将内容指定为带​​有 fa 类的 <i> 标记的 unicode。

我安装了 jPlayer 示例的 package.json 中的 font-awesome 依赖项。然后，我实现了一个 AudioPlayer 组件并使用了 jPlayer 提供的皮肤。组件渲染了但是图标都是框，我可以在源码中看到unicode内容。

这是项目架构的示例。这是/src/AudioPlayer/AudioPlayer.jsx中的播放按钮。

<Play><i className="fa">{/* Icon set in css */}</i></Play>

然后，AudioPlayer 被导入App.jsx。 App.jsx 导入具有此相关规则的样式表：

.fa, .fas, .far {
    font-family: FontAwesome !important;
}

App.jsx 然后由index.js 渲染。在index.js 中，我们导入音频播放器的样式表：

// Styles the jPlayer to look nice
import 'react-jplayer/dist/css/skins/sleek.min.css';
// Styles Play/Pause/Mute etc when icons (<i />) are used for them
import 'react-jplayer/dist/css/controls/iconControls.min.css';

iconControls.css 中播放按钮的规则如下所示：

.jp-jplayer .jp-icon-controls .jp-play i:before {
  content: "\F04B";
  font-family: 'Font Awesome\ 5 Free';
  font-weight: 900;
}

然后在index.html 的head 中，我将字体真棒CDN 包括作为修复正在呈现的框而不是字体真棒图标的最后尝试。

Answer 1

字体字符在以下情况下显示为空心方块：

1. 字体文件中不存在指定的 Unicode 字符。
2. 找不到请求的字体文件，并且没有指定回退。

由于它的 Font Awesome，没有备用字体，并且请求的字符在大多数字体中都不存在。所以你遇到了双重问题。

当浏览器由于路径问题而找不到字体文件时，几乎总是会发生这种情况。我会查看您的 CSS 以查找请求 @font-face 的位置并修复与您的项目匹配的路径。我猜这是在播放器 CSS 文件中，并且它期望是不是来自 CDN 的本地文件。

另外，请注意，Webpack 有时会移动文件并更新 CSS 中的路径，因此您可能需要将它们移动到“静态”目录并根据需要更改路径。

最后，您应该检查字体的名称以确保它与您系统中可用的字体相匹配。根据 Font Awesome 的文档，它应该是 font-family: "Font Awesome 5 Free"; 你的似乎有一个额外的反斜杠。

Answer 2

我认为在 styles.css 中有 FontAwesome !important 如下所示，它覆盖了 FontAwesome 5 Free 字体。您可以删除此样式以查看出现的字体。

fa, .fas, .far {
    font-family: FontAwesome !important;
}