react-fontawesome not displaying icons

问题

I'm attempting to using react-fontawesome and implementing it in what seems to me to be exactly the same as the readme: https://github.com/danawoodman/react-fontawesome/blob/master/readme.md

import React from 'react';
import FontAwesome from 'react-fontawesome'
...
export default class ComponentName extends React.Component {
    render() {
        return (
            <div>
                <div>
                    <span>
                        <FontAwesome
                            className='super-crazy-colors'
                            name='rocket'
                            size='2x'
                            spin
                            style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
                        />
                        SOME TEXT
                    </span>
                </div>
                ...
            </div>
        )
    }
}

But I'm not seeing an icon in the DOM. Although I do see in the Chrome Dev Tools:

<span style="text-shadow:0 1px 0 rgba(0, 0, 0, 0.1);" aria-hidden="true" class="fa fa-rocket fa-2x fa-spin super-crazy-colors" data-reactid=".0.$/=11.0.0.$/=10.$/=10.$/=10"></span>

which I feel like should be a  tag. I tried changing the ... to an ... in "edit as HTML" in the dev tools and the icon still didn't show.

I have add-module-exports in my plugins and stage-2 in my presets in my webpack.config.

Can anyone tell me if I'm missing something? Do I need some other package other than react-fontawesome to make this work? Do I need to import the standard font-awesome.css or load a font-awesome CDN? Any help would be greatly appreciated, thanks!

回答1:

I had the same problem. Read their Readme.md, and you see that there is this note:

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.

So the most simple way is to link to the fontawesome cdn in your html.

<head>
<meta charset="UTF-8">    
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet" integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" 
crossorigin="anonymous">
</head>

回答2:

As the other answers mention, you need to include the icons in your page somehow. Check out the react-fontawesome example here: https://github.com/danawoodman/react-fontawesome/blob/master/examples/index.html

You can see that the developer has included the font-awesome CSS on line #5.

On a separate note, Font Awesome v5 has been released, and you should consider moving to it. Read relevant docs here: https://www.npmjs.com/package/@fortawesome/react-fontawesome

To use v5:

Install dependencies:

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome
$ npm i --save @fortawesome/fontawesome-free-solid

Your component can then use icons like so:

import ReactDOM from 'react-dom';
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/fontawesome-free-solid'

const element = (
  <FontAwesomeIcon icon={faCoffee} />
)

ReactDOM.render(element, document.body);

You can also build a library of commonly used icons in your app, for easy reference. Check out working code here: https://codesandbox.io/s/8y251kv448

More details about the library function available here: https://www.npmjs.com/package/@fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently

回答3:

Run npm install font-awesome --save

In your index.js or App.js or YourComponent.js, import the minified CSS file.

import 'font-awesome/css/font-awesome.min.css';

回答4:

As @Alee pointed out Fontaweome fonts aren't included in the package. You will have to import it yourself.

Install npm font-awesome package. If you use npm run npm install font-awesome --save or if you use yarn then run yarn add font-awesome
Now you just have to import font-awesome.less under less directory by writing import 'font-awesome/less/font-awesome.less'

Now you should see your icons working :)

回答5:

I suspect that you have not yet imported the CSS that FontAwesome needs - download the minified CSS file from FontAwesome's Web site and import it into your app.scss file or wherever else you're importing other stylesheets.

The react-fontawesome library is helping you create elements with class names like 'up-arrow', but without the stylesheet, your project will not know that there are icons corresponding to those classes.

回答6:

The only example I got working that actually seems up-to-date and didn't throw "can't resolve 'react' errors:

https://scotch.io/tutorials/using-font-awesome-5-with-react

import React from "react";
import { render } from "react-dom";

// get our fontawesome imports
import { faHome } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

// create our App
const App = () => (
  <div>
    <FontAwesomeIcon icon={faHome} />
  </div>
);

// render to #root
render(<App />, document.getElementById("root"));

回答7:

Try adding

<script src='https://use.fontawesome.com/3bd7769ce1.js'></script>

to your main index.html within your react project.

来源：https://stackoverflow.com/questions/42522233/react-fontawesome-not-displaying-icons

标签

reactjs

font-awesome