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

105

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?

user3127060
źródło
3
Zwróć uwagę, że niektóre starsze odpowiedzi odnoszą się do react-fontawesomewersji 4, a niektóre do oficjalnego @fortawesome/fontawesomekomponentu obsługującego wersję 5.
jinglesthula
A oto aktualny link do react-fontawesome obsługującego wersję 5: github.com/FortAwesome/react-fontawesome
mojave

Odpowiedzi:

59

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?

Bandyta
źródło
czy to możliwe, aby działało responsjs 15.6 dodałem link index.html <link rel = "ikona skrótu" href = " maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/… "> ale nie mogę
rahuldm
313

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>;
}
Praveen MP
źródło
16
W rzeczywistości jest to odpowiedź, która najlepiej wyjaśnia pierwsze pytanie.
nacho_dh
20
Chcę tylko zauważyć, że dzięki konfiguracji aplikacji create-react-app nie musisz uwzględniać ../node_modules/w ścieżce ... import 'font-awesome/css/font-awesome.min.css';działa :)
plong0
2
Ale w ten sposób, kiedy dodajemy ikony takie jak <i className = "far fa-heart"> </i>, nie renderuje się. Ale jeśli dodamy <i className = "fa fa-heart"> </i>, wyrenderuje się. Dlaczego tak jest?
Thidasa Pankaja
3
Używanie @ThidasaParanavitharana <i className="far fa-heart"></i>działa tylko z font-awesome v5. To rozwiązanie instaluje font-awesome v4
XeniaSis
33

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">

Amituuush
źródło
14
Nie zapomnij również dodać <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
pliku
8
czy nadal musisz dołączyć płytę CDN, jeśli instalujesz ją przez npm?
Amituuush
2
@Amituuush "Instalacja" FA przez NPM (na razie) nie umieszcza go tam, gdzie powinien. Musisz zawsze skopiować go do odpowiedniego publicfolderu i srcręcznie dodać arkusz stylów z poprawnym .
Domi
4
Nowy link do CDN: <link href = "// maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet">
guya
4
Autor reakcja-fontawesome tutaj. Będziesz musiał jakoś dołączyć style / czcionki do swojej aplikacji, albo w wersji CDN, albo używając czegoś takiego jak WebPack lub po prostu linkując do pobranych wersji. Celem tej biblioteki było to, aby nie narzucać Ci narzędzia takiego jak WebPack
Dana Woodman
28

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;
Alexander Sidikov Pfeif
źródło
Czy naprawdę tego potrzebujesz: @fortawesome/fontawesome-free-regularponieważ nie jest to używane z twojego przykładu.
gmajivu
@gabeno hej nie, to tylko przykład. To powinno po prostu zapamiętać / pokazać, że możesz również użyć drugiego. Ale dzięki za podpowiedź, powinienem dodać komentarz.
Alexander Sidikov Pfeif
1
Świetny! wystarczy zmodyfikować ten import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'FontAwesomeIcon nie jest już domyślnym eksportem.
MohitGhodasara
19
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;
Prasobh.Kollattu
źródło
15

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 }/>
Jackkobec
źródło
6

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'
Karan Patokar
źródło
6

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!

Naor Bar
źródło
5

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>

Matt C.
źródło
4

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.

Emily Kuckelman
źródło
4
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>
Hazem AbdelHamid
źródło
2

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'
Jack Gerrard
źródło
2

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 !!!

smartworld-dm
źródło
0

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

theterminalguy
źródło
0

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

wprowadź opis obrazu tutaj 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

Erick Garcia
źródło
W przypadku pierwszej opcji powinieneś zrobić:<FontAwesomeIcon icon={faCoffee} />
gildniy