Jak dołączyć ikonę Font Awesome do renderowania Reacta ()

Ilekroć próbuję użyć ikony Font Awesome w React's render(), nie jest ona wyświetlana na wynikowej stronie internetowej, chociaż działa w normalnym HTML.

render: function() {
    return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>;
}

Oto przykład na żywo: http://jsfiddle.net/pLWS3/

Gdzie jest wina?

React używa classNameatrybutu, podobnie jak DOM.

Jeśli używasz kompilacji deweloperskiej i spojrzysz na konsolę, pojawi się ostrzeżenie. Możesz to zobaczyć na jsfiddle.

Ostrzeżenie: nieznana klasa właściwości DOM. Czy chodziło Ci o className?

Jeśli dopiero zaczynasz przygodę z React JS i używasz polecenia create-react-app cli do tworzenia aplikacji, uruchom następujące polecenie NPM, aby dołączyć najnowszą wersję font-awesome.

npm install --save font-awesome

importuj font-awesome do swojego pliku index.js. Po prostu dodaj poniższą linię do swojego pliku index.js

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

lub

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

Nie zapomnij użyć atrybutu className

 render: function() {
    return <div><i className="fa fa-spinner fa-spin">no spinner but why</i></div>;
}

Możesz także skorzystać z react-fontawesomebiblioteki ikon. Oto link: React-fontawesome

Ze strony NPM wystarczy zainstalować przez npm:

npm install --save react-fontawesome

Wymagaj modułu:

var FontAwesome = require('react-fontawesome');

Na koniec użyj <FontAwesome />komponentu i przekaż atrybuty, aby określić ikonę i styl:

var MyComponent = React.createClass({
  render: function () {
    return (
      <FontAwesome
        className='super-crazy-colors'
        name='rocket'
        size='2x'
        spin
        style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
      />
    );
  }
});

Nie zapomnij dodać niesamowitego CSS do pliku index.html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

https://github.com/FortAwesome/react-fontawesome

zainstaluj fontawesome & respond-fontawesome

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

następnie w swoim komponencie

import React, { Component } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCheckSquare, faCoffee } from '@fortawesome/fontawesome-free-solid'
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>
          <FontAwesomeIcon icon={faCoffee} />
        </h1>
      </div>
    );
  }
}

export default App;

npm install --save-dev @fortawesome/fontawesome-free

w index.js

import '@fortawesome/fontawesome-free/css/all.min.css';

następnie użyj ikon takich jak poniżej:

import React, { Component } from "react";

class Like extends Component {
  state = {};
  render() {
    return <i className="fas fa-heart"></i>;
  }
}

export default Like;

Najprostszym rozwiązaniem jest:

Zainstalować:

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

Import:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faThumbsUp } from '@fortawesome/free-solid-svg-icons';

Posługiwać się:

<FontAwesomeIcon icon={ faThumbsUp }/>

Najpierw musisz zainstalować pakiet.

npm install --save react-fontawesome

LUB

npm i --save @fortawesome/react-fontawesome

Nie zapomnij użyć classNamezamiast class.

Później musisz zaimportować je do pliku, w którym chcesz ich użyć.

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

lub

import FontAwesomeIcon from '@fortawesome/react-fontawesome'

Po pewnym czasie zmagałem się z tym, wymyśliłem tę procedurę (na podstawie dokumentacji Font Awesome tutaj ):

Jak już wspomniano, musisz zainstalować bibliotekę fontawesome , respons-fontawesome i fontawesome icons :

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/react-fontawesome

a następnie zaimportuj wszystko do swojej aplikacji React:

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faStroopwafel } from '@fortawesome/free-solid-svg-icons'

library.add(faStroopwafel)

Oto trudna część:

Aby zmienić lub dodać ikony, musisz znaleźć dostępne ikony w bibliotece modułów węzła, tj

<your_project_path>\node_modules\@fortawesome\free-solid-svg-icons  

Każda ikona ma dwa odpowiednie pliki: .js i .d.ts, a nazwa pliku wskazuje frazę importu (dość oczywiste ...), więc dodanie ikon gniewu , klejnotów i znaczników wyboru wygląda następująco:

import { faStroopwafel, faAngry, faGem, faCheckCircle } from '@fortawesome/free-solid-svg-icons'

library.add(faStroopwafel, faAngry, faGem, faCheckCircle)

Aby użyć ikon w kodzie React js, użyj:

<FontAwesomeIcon icon=icon_name/>

Nazwę ikony można znaleźć w pliku .js odpowiedniej ikony:

np. dla faCheckCircle zajrzyj do środka faCheckCircle.js dla zmiennej „ iconName ”:

...
var iconName = 'check-circle'; 
... 

a kod React powinien wyglądać tak:

<FontAwesomeIcon icon=check-circle/> 

Powodzenia!

Jeśli chcesz dołączyć niesamowitą bibliotekę czcionek bez konieczności importowania modułów i instalacji npm, umieść to w sekcji head na swojej stronie React index.html :

public / index.html (w sekcji head)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

Następnie w swoim komponencie (takim jak App.js) użyj po prostu standardowej konwencji klasy awesome font. Pamiętaj tylko, aby użyć className zamiast class:

<button className='btn'><i className='fa fa-home'></i></button>

Odpowiedź Aleksandra z góry naprawdę mi pomogła!

Próbowałem umieścić ikony kont społecznościowych w stopce mojej aplikacji, którą utworzyłem za pomocą ReactJS, aby móc łatwo dodać do nich stan najechania kursorem, jednocześnie łącząc moje konta społecznościowe. Oto, co musiałem zrobić:

$ npm i --save @fortawesome/fontawesome-free-brands

Następnie u góry mojego komponentu stopki umieściłem to:

import React from 'react';
import './styles/Footer.css';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import {faTwitter, faLinkedin, faGithub} from '@fortawesome/fontawesome-free-brands';

Mój komponent wyglądał wtedy tak:

<a href='https://github.com/yourusernamehere'>
  <FontAwesomeIcon className ='font-awesome' icon={faGithub} />
</a>

Działał jak urok.

npm install --save font-awesome

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

następnie

<i className="fa fa-shopping-cart" style={{fontSize:24}}></i>  
        <span className="badge badge-danger" style={{position:"absolute", right:5, top:5}}>number of items in cart</span>

jak powiedział „Praveen MP”, możesz zainstalować font-awesome jako pakiet. jeśli masz włóczkę, możesz biegać:

 yarn add font-awesome

Jeśli nie masz przędzy, zrób tak, jak powiedział Praveen i zrób:

npm install --save font-awesome

spowoduje to dodanie pakietu do zależności projektów i zainstalowanie pakietu w folderze node_modules. w pliku App.js dodaj

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

Doświadczyłem tego przypadku; Potrzebuję witryny React / Redux, która powinna działać idealnie na produkcji.

ale istniał „tryb ścisły”; Nie powinienem uruchamiać tego z tymi poleceniami.

yarn global add serve
serve -s build

Powinien działać tylko z kliknięciem pliku build / index.html. Kiedy użyłem fontawesome z npm font-awesome, działał on w trybie programistycznym, ale nie działał w „trybie ścisłym”.

Oto moje rozwiązanie:

public/css/font-awesome.min.css
public/fonts/font-awesome.eot 
*** other different types of files(4) ***
*** I copied these files for node_module/font-awesome ***
*** after copied then can delete the font-awesome from package.json ***

w public / index.html

<link rel="stylesheet" href="%PUBLIC_URL%/css/font-awesome.min.css">

Po wszystkich powyższych krokach fontawesome działa ŁADNIE !!!

Kasa reaguje na ikony całkiem fajnie i działa dobrze.

W moim przypadku postępowałem zgodnie z dokumentacją react-fontawesomepakietu, ale nie jest jasne, jak wywołać ikonę podczas ustawiania ikon w bibliotece

oto co robiłem:

Plik App.js.

import {faCoffee} from "@fortawesome/pro-light-svg-icons";
library.add(faSearch, faFileSearch, faCoffee);

Plik komponentu

<FontAwesomeIcon icon={"coffee"} />

Ale otrzymywałem ten błąd

Następnie dodałem alias podczas przekazywania ikony rekwizytu, takiego jak:

<FontAwesomeIcon icon={["fal", "coffee"]} />

I działa, możesz znaleźć wartość przedrostka w pliku icon.js, w moim przypadku było to: faCoffee.js