I have incorporated the jPlayer example into a create-react-app. Encountering an issue where font-awesome icons are displaying as boxes in this CodeSandbox illustration.
https://codesandbox.io/s/peaceful-heisenberg-d59nz?fontsize=14&hidenavigation=1&theme=dark
The icons are rendered using css rules that define content as unicode for <i> tags with the class fa.
I have installed the font-awesome dependency listed in the jPlayer example's package.json. Then, I created an AudioPlayer component and utilized the predefined skins by jPlayer. Despite successfully rendering the component, the icons appear as boxes, with the unicode content visible in the source code.
For instance, here is the play button in /src/AudioPlayer/AudioPlayer.jsx:
<Play><i className="fa">{/* Icon set in css */}</i></Play>Subsequently, the AudioPlayer component is imported into App.jsx, which also imports a stylesheet containing this important rule:
.fa, .fas, .far {
font-family: FontAwesome !important;
}
App.jsx is then rendered within index.js. The audio player's stylesheets are imported inside index.js as follows:
// 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 defining the play button in iconControls.css appears like this:
.jp-jplayer .jp-icon-controls .jp-play i:before {
content: "\F04B";
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
}
In a final effort to resolve the issue of box rendering instead of font-awesome icons, I have included the font-awesome CDN within the head section of index.html.