All geek questions in one place

Answer to this question

I am trying to use response-fontawesome and implement it in what seems to me exactly the same as 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 do not see the icon in the DOM. Although I see in 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, it seems to me, should be a <i> . I tried changing <span>...</span> to <i>...</i> in "edit as HTML" in dev tools and the icon still didn't display.

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

Can someone tell me if I missed something? Do I need some other package other than reaction-fontawesome to make this work? Do I need to import the standard font-awesome.css or download the font-awesome CDN? Any help would be greatly appreciated, thanks!

+14
source share
7 answers

I had the same problem. Read them through Readme.md and you will see that there is this note:

Note. This component does not include any of the Font Awesome CSS fonts or fonts, so you should definitely include them at your end by adding them to your build process or by contacting the CDN version .

So the easiest way is to link to fontovesome cdn in 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>
+16
source

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

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

Font Awesome v5 was released in a separate note, and you should consider switching to it. Read the relevant documents here: https://www.npmjs.com/package/@fortawesome/react-fontawesome

To use v5:

Install the dependencies:

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

Your component can then use these icons:

 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 create a library of commonly used icons in your application for ease of use. Check the working code here: https://codesandbox.io/s/8y251kv448

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

+10
source

Run npm install font-awesome --save

In your index.js or App.js or YourComponent.js import a miniature CSS file.

 import 'font-awesome/css/font-awesome.min.css';
+5
source

As @Alee noted, Fontaweome fonts are not included in the package. You will have to import it yourself.

  • Install the npm font-awesome package. If you use npm run npm install font-awesome --save or use yarn, run yarn add font-awesome

  • Now you need to import font-awesome.less into the less directory by writing import 'font-awesome/less/font-awesome.less'

You should now see that your icons work :)

+2
source

I suspect that you have not yet imported the CSS that FontAwesome needs - download the reduced CSS file from the FontAwesome website and import it into the app.scss file or wherever you import other stylesheets.

The Reply-fontawesome library helps you create elements with class names, such as the up arrow, but without a stylesheet, your project will not know that there are icons that correspond to these classes.

0
source

The only example I received that actually seems relevant and does not throw out “cannot allow” to respond to 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"));
0
source

Try adding https://use.fontawesome.com/3bd7769ce1.js'> to your main index.html as part of your response project.

-1
source

Source: https://habr.com/ru/post/1264860/

More articles:


All Articles