Bagaimana cara memasukkan ikon Font Awesome dalam render React ()

Setiap kali saya mencoba menggunakan ikon Font Awesome di React's render(), itu tidak ditampilkan di halaman web yang dihasilkan meskipun berfungsi dalam HTML normal.

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

Berikut adalah contoh langsungnya: http://jsfiddle.net/pLWS3/

Dimana salahnya?

React menggunakan classNameatribut, seperti DOM.

Jika Anda menggunakan build pengembangan, dan melihat konsol, ada peringatan. Anda dapat melihat ini di jsfiddle.

Peringatan: Kelas properti DOM tidak diketahui. Apakah yang Anda maksud className?

Jika Anda baru mengenal React JS dan menggunakan perintah create-react-app cli untuk membuat aplikasi, jalankan perintah NPM berikut untuk memasukkan versi terbaru dari font-awesome.

npm install --save font-awesome

impor font-awesome ke file index.js Anda. Cukup tambahkan baris di bawah ini ke file index.js Anda

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

atau

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

Jangan lupa untuk menggunakan className sebagai atribut

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

Anda juga dapat menggunakan react-fontawesomeperpustakaan ikon. Ini tautannya: react-fontawesome

Dari halaman NPM, cukup instal melalui npm:

npm install --save react-fontawesome

Membutuhkan modul:

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

Dan terakhir, gunakan <FontAwesome />komponen dan berikan atribut untuk menentukan ikon dan gaya:

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)' }}
      />
    );
  }
});

Jangan lupa untuk menambahkan CSS font-awesome ke 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

instal fontawesome & react-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

lalu di komponen Anda

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

di index.js

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

lalu gunakan ikon seperti di bawah ini:

import React, { Component } from "react";

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

export default Like;

Solusi paling sederhana adalah:

Install:

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

Impor:

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

Menggunakan:

<FontAwesomeIcon icon={ faThumbsUp }/>

Anda perlu menginstal paketnya terlebih dahulu.

npm install --save react-fontawesome

ATAU

npm i --save @fortawesome/react-fontawesome

Jangan lupa untuk menggunakan classNamebukan class.

Nanti Anda perlu mengimpornya ke file tempat Anda ingin menggunakannya.

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

atau

import FontAwesomeIcon from '@fortawesome/react-fontawesome'

Setelah berjuang dengan ini untuk sementara waktu, saya menemukan prosedur ini (berdasarkan dokumentasi Font Awesome di sini ):

Seperti yang dinyatakan, Anda harus menginstal pustaka ikon fontawesome , react-fontawesome dan fontawesome :

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

lalu impor semuanya ke aplikasi React Anda:

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

library.add(faStroopwafel)

Inilah bagian yang sulit:

Untuk mengubah atau menambah ikon, Anda harus menemukan ikon yang tersedia di perpustakaan modul node Anda, mis

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

Setiap ikon memiliki dua file yang relevan: js dan .d.ts, dan nama file menunjukkan frase impor (cukup jelas ...), sehingga menambah marah , permata dan check-tanda ikon terlihat seperti ini:

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

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

Untuk menggunakan ikon di kode React js Anda, gunakan:

<FontAwesomeIcon icon=icon_name/>

Nama ikon dapat ditemukan di file .js ikon yang relevan:

misalnya untuk faCheckCircle lihat ke dalam faCheckCircle.js untuk ' variabel ' iconName ':

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

dan kode React akan terlihat seperti ini:

<FontAwesomeIcon icon=check-circle/> 

Semoga berhasil!

Jawaban Alexander dari atas sangat membantu saya!

Saya mencoba mendapatkan ikon akun sosial di footer aplikasi saya yang saya buat dengan ReactJS sehingga saya dapat dengan mudah menambahkan status hover ke mereka sambil juga meminta mereka menautkan akun sosial saya. Inilah yang akhirnya harus saya lakukan:

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

Kemudian di bagian atas komponen footer saya, saya menyertakan ini:

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

Komponen saya kemudian terlihat seperti ini:

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

Bekerja seperti pesona.

Jika Anda ingin memasukkan pustaka font yang mengagumkan tanpa harus melakukan impor modul dan penginstalan npm, letakkan ini di bagian head halaman React index.html :

public / index.html (di bagian head)

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

Kemudian di komponen Anda (seperti App.js) cukup gunakan konvensi kelas font standar yang mengagumkan. Ingatlah untuk menggunakan className alih-alih class:

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

npm install --save font-awesome

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

kemudian

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

seperti yang dikatakan 'Praveen MP' Anda dapat menginstal font-awesome sebagai sebuah paket. jika Anda memiliki benang, Anda dapat menjalankan:

 yarn add font-awesome

Jika Anda tidak memiliki benang, lakukan seperti yang dikatakan dan dilakukan Praveen:

npm install --save font-awesome

ini akan menambahkan paket ke dependensi proyek Anda dan menginstal paket di folder node_modules Anda. di file App.js Anda tambahkan

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

Saya pernah mengalami kasus ini; Saya membutuhkan situs react / redux yang seharusnya berfungsi dengan sempurna dalam produksi.

tapi ada 'mode ketat'; Seharusnya tidak makan siang dengan perintah ini.

yarn global add serve
serve -s build

Harus bekerja dengan hanya mengklik file build / index.html. Ketika saya menggunakan fontawesome dengan npm font-awesome, itu berfungsi dalam mode pengembangan tetapi tidak bekerja dalam 'mode ketat'.

Inilah solusi saya:

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

di public / index.html

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

Setelah semua langkah di atas, fontawesome bekerja dengan baik !!!

Ikon reaksi Checkout cukup bodoh dan bekerja dengan baik.

Dalam kasus saya, saya mengikuti dokumentasi untuk react-fontawesomepaket, tetapi mereka tidak jelas tentang cara memanggil ikon saat mengatur ikon ke perpustakaan

inilah yang saya lakukan:

File App.js

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

File komponen

<FontAwesomeIcon icon={"coffee"} />

Tapi saya mendapatkan kesalahan ini

Kemudian saya menambahkan alias saat melewati ikon prop seperti:

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

Dan berhasil, Anda dapat menemukan nilai awalan di file icon.js, dalam kasus saya adalah: faCoffee.js