Unicode CSS Font Awesome Icons Rendering as Boxes in React

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.

Remember to look at your post after hitting the submit button, just in case you got the markdown formatting wrong. Which you did. Easy enough to fix, but others shouldn't have to do that for you. — Mike 'Pomax' Kamermans
You have code blocks that correctly use block formatting, and then you have code blocks that use inline formatting instead, so instead of being a nice full width block of "code over multiple lines", it's just paragraph text. — Mike 'Pomax' Kamermans
Oh, I see, the imports for the jPlayer style sheets are line-by-line. — Casey
You have multi-line CSS that should be a block, too. Remember that this is not github, SO has its own markdown rules. And on a more "asking a good question" note: please do not ask people to clone your project, you're responsible for making sure that your post contains all the details necessary to sensibly comment on the problem you're having, so you may need to form a minimal reproducible example instead. Especially since your code won't have this problem anymore soon, that link will soon be of no use to future visitors of the site, looking for answers the same way you have. — Mike 'Pomax' Kamermans

vishnu sandhireddy vishnu sandhireddy · Accepted Answer · 2020-02-16T17:48:13

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;
}

Unicode CSS Font Awesome Icons Rendering as Boxes in React

2 Answers