search

danawoodman / react-fontawesome

A React Font Awesome component.
https://www.npmjs.com/package/react-fontawesome
MIT License
668 stars 72 forks source link

Icons are not appearing #59

Closed atulS7inc closed 6 years ago

atulS7inc commented 6 years ago

I've gone through all the process and also linked the font-awesome css in my "index.html" which is mentioned in Readme file. But still, icons are not appearing.

Icon is rendered successfully and i can see that in DOM - <span aria-hidden="true" class="fa fa-rocket fa-3x"></span>

Using react version 15.6.1 and react-fontawesome version 1.6.1

Thanks!

danawoodman commented 6 years ago

@atulS7inc can you check the "Network" tab in Chrome DevTools and make sure the fonts are being loaded for FontAwesome? You may not have the paths in your CSS pointing to the fonts correctly. Reopen if it's still an issue!

jseminck commented 6 years ago

I ran into the same issue. The "problem" for me was that on the npm website, this is the first thing that I read:

Features No dependencies (other than React)

I assumed that because of no other dependencies, I also did not have to include font-awesome in one way or another... of course, below the list it does mention the following... but it was easy to read over this. 😄

Note: This component does not include any of the Font Awesome CSS or fonts, so you'll need to make sure to include those on your end somehow, either by adding them to your build process or linking to CDN versions.

danawoodman commented 6 years ago

@jseminck a PR to make the readme more clear is welcome 😇

freereikicourse commented 6 years ago

+1 Second time installing and still need to google how to make this thing work... ughhh frustrating

freereikicourse commented 6 years ago

The readme could have some simple steps:

danawoodman commented 6 years ago

@freereikicourse that is assuming someone is using WebPack and misses some steps (CSS loader, etc). I've updated readme to have info on the CDN version and to link to a blog post on how to get FontAwesome working with WebPack. Hopefully this helps.