react-jPlayer-examples | Examples for react-jPlayer and add-ons | Frontend Framework library
kandi X-RAY | react-jPlayer-examples Summary
kandi X-RAY | react-jPlayer-examples Summary
Examples for react-jPlayer and react-jPlaylist.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of react-jPlayer-examples
react-jPlayer-examples Key Features
react-jPlayer-examples Examples and Code Snippets
Community Discussions
Trending Discussions on react-jPlayer-examples
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 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
.
{/* Icon set in css */}
Then, the AudioPlayer is imported into App.jsx
. App.jsx
imports a stylesheet which has this relevant rule:
ANSWER
Answered 2020-Feb-16 at 17:41Font 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.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install react-jPlayer-examples
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page