search

danawoodman / react-fontawesome

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

How do I use this exactly? #27

Closed amihaiemil closed 7 years ago

amihaiemil commented 7 years ago

Hello,

I have trouble getting this to work (I'm new to react so probably I'm missing something obvious). I installed the lib via npm, declared in package.json and imported in my react class, like this:

image

The render method this:

image

The code compiles, my other elements render, but I see no icon rendered on the page. Any help would be appreciated.

Best regards, Mihai

matias-casal commented 7 years ago

just add this: @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');

JuHwon commented 7 years ago

is there any better solution? having the same issue

danawoodman commented 7 years ago

@amihaiemil @JuHwon this repo does not include the FontAwesome assets so you must include them yourself (this is mentioned in the readme). There are many options to do this including using WebPack or just directly linking to them in your page (using CDN or local files, whatever you work)

danawoodman commented 7 years ago

Thanks @Casy for mentioning one option for people

mhaligowski commented 7 years ago

Any idea how to make it work with npm? I'm using the create-react-app, and was able to use Bootstrap like a charm: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap.

React-fontawesome is super close to that, bot not sure how I can make it work with fontawesome package in NPM.

danawoodman commented 7 years ago

@mhaligowski you can install it using npm install -S react-fontawesome and then, depending on what your build process is, you will need to include Font Awesome's CSS files. You can use the CDN version or if you're using something like Webpack you can npm i -S font-awesome and then in your CSS/SCSS file you can @import '~font-awesome/scss/font-awesome or similar. Hope that helps!