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?
reactjs
font-awesome
user3127060
źródło
źródło
react-fontawesome
wersji 4, a niektóre do oficjalnego@fortawesome/fontawesome
komponentu obsługującego wersję 5.Odpowiedzi:
React używa
className
atrybutu, podobnie jak DOM.Jeśli używasz kompilacji deweloperskiej i spojrzysz na konsolę, pojawi się ostrzeżenie. Możesz to zobaczyć na jsfiddle.
źródło
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.
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>; }
źródło
../node_modules/
w ścieżce ...import 'font-awesome/css/font-awesome.min.css';
działa :)<i className="far fa-heart"></i>
działa tylko z font-awesome v5. To rozwiązanie instaluje font-awesome v4Możesz także skorzystać z
react-fontawesome
biblioteki ikon. Oto link: React-fontawesomeZe strony NPM wystarczy zainstalować przez npm:
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">
źródło
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
public
folderu isrc
ręcznie dodać arkusz stylów z poprawnym .https://github.com/FortAwesome/react-fontawesome
zainstaluj fontawesome & respond-fontawesome
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;
źródło
@fortawesome/fontawesome-free-regular
ponieważ nie jest to używane z twojego przykładu.import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
FontAwesomeIcon nie jest już domyślnym eksportem.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;
źródło
Najprostszym rozwiązaniem jest:
Zainstalować:
Import:
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faThumbsUp } from '@fortawesome/free-solid-svg-icons';
Posługiwać się:
źródło
Najpierw musisz zainstalować pakiet.
LUB
Nie zapomnij użyć
className
zamiastclass
.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'
źródło
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 :
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
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:
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:
Powodzenia!
źródło
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>
źródło
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ć:
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.
źródło
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>
źródło
jak powiedział „Praveen MP”, możesz zainstalować font-awesome jako pakiet. jeśli masz włóczkę, możesz biegać:
Jeśli nie masz przędzy, zrób tak, jak powiedział Praveen i zrób:
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'
źródło
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 !!!
źródło
Kasa reaguje na ikony całkiem fajnie i działa dobrze.
źródło
W moim przypadku postępowałem zgodnie z dokumentacją
react-fontawesome
pakietu, ale nie jest jasne, jak wywołać ikonę podczas ustawiania ikon w biblioteceoto co robiłem:
import {faCoffee} from "@fortawesome/pro-light-svg-icons"; library.add(faSearch, faFileSearch, faCoffee);
<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
źródło
<FontAwesomeIcon icon={faCoffee} />