Unicode CSS Font Awesome 图标在 React 中呈现为方框

Question

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

图标通过 css 规则呈现，将内容指定为带有 fa class.

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

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

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

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

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

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

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

Answer 2

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

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

Unicode CSS Font Awesome 图标在 React 中呈现为方框

Unicode CSS Font Awesome Icons Rendering as Boxes in React

css

unicode

font-awesome

reactjs