Unable to view rendered icon

danawoodman / react-fontawesome

A React Font Awesome component.

https://www.npmjs.com/package/react-fontawesome

MIT License

668 stars 72 forks source link

Unable to view rendered icon #60

Closed fergatron closed 6 years ago

fergatron commented 6 years ago

Hi, I installed react-fontawesome via npm and imported it into my React app. When I run the app I see the HTML render, but there's no ICON. Looking at web developer tools in Chrome I also don't see any CSS assignments nor a font-awesome css call in the network tab.

import FontAwesome from 'react-fontawesome';

<FontAwesome name='facebook' />

prymorsk commented 6 years ago

In your public folder add this line to your index.html file: <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' integrity='sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN' crossorigin='anonymous'>

ivanberry commented 6 years ago

Problem still:

install react-fontawesome
include font-awesome css with CDN or with npm and import
In Google DevTools, the font-awesome.css show
still fail to see the icons

danawoodman commented 6 years ago

@ivanberry can you try to see if FontAwesome works without react-fontawesome? Just try <span className="fa fa-rocket" /> and see if the icon renders? If it doesn't, your issue is with the CSS not loading for some reason. Also check inspector to see if the font file is being loaded.

Gonna close but re-open if after those steps you still think it is react-fontawesome 👍

fergatron commented 6 years ago

Sorry I never got back to you. As stated the solution was for me to include the CSS file. For some reason I figured it would have been part of the package. I'm still wrapping my head around NPM.

@ivanberry it looks like you misspelled "rocket".