Unicode CSS Font Awesome Icons Rendering as Boxes in React - css

Question

I am using the jPlayer example in a create-react-app. Here is a CodeSandbox showing the issue of font-awesome icon's rendering as boxes.
The icons render via css rules specifying content as unicode for <i> tags with the fa class.
I installed the font-awesome dependency which was in the jPlayer example's package.json. Then, I implemented an AudioPlayer component and used the skins provided by jPlayer. The component renders but the icons are all boxes, and I can see the unicode content in the source.
Here's an example of the project architecture. This is the play button in /src/AudioPlayer/AudioPlayer.jsx.
<Play><i className="fa">{/* Icon set in css */}</i></Play>
Then, the AudioPlayer is imported into App.jsx. App.jsx imports a stylesheet which has this relevant rule:
.fa, .fas, .far {
font-family: FontAwesome !important;
}
App.jsx is then rendered by index.js. Inside index.js, we import the audio player's stylesheets:
// 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';
The rule for the play button in iconControls.css looks like this:
.jp-jplayer .jp-icon-controls .jp-play i:before {
content: "\F04B";
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
}
then within index.html's head I include the font-awesome CDN as a final attempt at fixing the boxes being rendered instead of font-awesome icons.

Answer 1

I think in the styles.css there is FontAwesome !important as shown below which is overriding the FontAwesome 5 Free font. You could remove this style to see the fonts coming up.
fa, .fas, .far {
font-family: FontAwesome !important;
}

Answer 2

Font characters show as open squares when:
The Unicode character specified doesn't exist in the font file.
The requested font file can't be found and there's no fallback specified.
Since its's Font Awesome, there's no fallback font AND the requested character doesn't exist in most fonts. So you get a double problem.
This almost always happens when the browser can't find the font file due to path issues. I'd look through your CSS to find where #font-face is requested and fix the path to match your project. I would guess this is in the player CSS file AND that it expect's a local file not from the CDN.
Also, be aware that Webpack sometimes moves files and updates paths found in CSS so you may need to move those to a "static" directory and change paths as needed.
Finally, you should check the name of the font to make sure it matches what you have available in your system. According to Font Awesome's Docs, it should be font-family: "Font Awesome 5 Free"; your's seems to have an extra back slash.