1

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.

Edit peaceful-heisenberg-d59nz

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.

Improve this question
9
  • 1
    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. Commented Feb 16, 2020 at 17:18
  • Sorry but I do not see an error in formatting Commented Feb 16, 2020 at 17:23
  • 1
    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. Commented Feb 16, 2020 at 17:25
  • Oh, I see, the imports for the jPlayer style sheets are line-by-line. Commented Feb 16, 2020 at 17:26
  • 1
    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. Commented Feb 16, 2020 at 17:28

2 Answers 2

Reset to default
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;
}

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I tried this in the CodeSandbox and the icons are still rendered as boxes.
I saw the sand box url , I think font awesome style link is missing from index.html. You could add it back and refresh the page codesandbox.io/s/mutable-rain-xk7ce
0

Font characters show as open squares when:

  1. The Unicode character specified doesn't exist in the font file.
  2. 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.

Improve this answer

1 Comment

I created a CodeSandbox which shows the css styling is very minimal. font-face is never requested from any of the stylesheets.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.