Cách đưa biểu tượng Font Awesome vào render của React ()

Bất cứ khi nào tôi cố gắng sử dụng biểu tượng Font Awesome trong React's render() , nó sẽ không được hiển thị trên trang web kết quả mặc dù nó hoạt động trong HTML bình thường.

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

Đây là một ví dụ trực tiếp: http://jsfiddle.net/pLWS3/

Lỗi do đâu?

React sử dụng className thuộc tính, như DOM.

Nếu bạn sử dụng bản dựng phát triển và nhìn vào bảng điều khiển, sẽ có một cảnh báo. Bạn có thể thấy điều này trên jsfiddle.

Cảnh báo: Lớp thuộc tính DOM không xác định. Ý của bạn là className?

Nếu bạn chưa quen với React JS và sử dụng lệnh cli của create-react-app để tạo ứng dụng, thì hãy chạy lệnh NPM sau để bao gồm phiên bản font-awesome mới nhất.

npm install --save font-awesome

nhập phông chữ tuyệt vời vào tệp index.js của bạn. Chỉ cần thêm dòng dưới đây vào tệp index.js của bạn

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

hoặc là

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

Đừng quên sử dụng className làm thuộc tính

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

Bạn cũng có thể sử dụng react-fontawesomethư viện biểu tượng. Đây là liên kết: react-fontawesome

Từ trang NPM, chỉ cần cài đặt qua npm:

npm install --save react-fontawesome

Yêu cầu mô-đun:

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

Và cuối cùng, sử dụng <FontAwesome />thành phần và chuyển vào các thuộc tính để chỉ định biểu tượng và kiểu dáng:

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

Đừng quên thêm CSS có phông chữ tuyệt vời vào 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

cài đặt 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

sau đó trong thành phần của bạn

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

trong index.js

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

sau đó sử dụng các biểu tượng như dưới đây:

import React, { Component } from "react";

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

export default Like;

Giải pháp đơn giản nhất là:

Tải về:

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

Nhập khẩu:

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

Sử dụng:

<FontAwesomeIcon icon={ faThumbsUp }/>

Bạn cần cài đặt gói trước.

npm install --save react-fontawesome

HOẶC LÀ

npm i --save @fortawesome/react-fontawesome

Đừng quên sử dụng classNamethay vìclass .

Sau này, bạn cần nhập chúng vào tệp mà bạn muốn sử dụng chúng.

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

hoặc là

import FontAwesomeIcon from '@fortawesome/react-fontawesome'

Sau khi vật lộn với điều này một lúc, tôi đã nghĩ ra quy trình này (dựa trên tài liệu của Font Awesome ở đây ):

Như đã trình bày, bạn sẽ phải cài đặt fontawesome , phản ứng-fontawesome và fontawesome các biểu tượng thư viện :

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

và sau đó nhập mọi thứ vào ứng dụng React của bạn:

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

library.add(faStroopwafel)

Đây là phần khó khăn:

Để thay đổi hoặc thêm các biểu tượng, bạn sẽ phải tìm các biểu tượng có sẵn trong thư viện mô-đun nút của mình, tức là

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

Mỗi biểu tượng có hai tệp có liên quan: .js và .d.ts, và tên tệp cho biết cụm từ nhập (khá rõ ràng ...), do đó, việc thêm các biểu tượng giận dữ , đá quý và dấu kiểm sẽ giống như sau:

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

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

Để sử dụng các biểu tượng trong mã React js của bạn, hãy sử dụng:

<FontAwesomeIcon icon=icon_name/>

Bạn có thể tìm thấy tên biểu tượng trong tệp .js của biểu tượng có liên quan:

ví dụ: đối với faCheckCircle, hãy tìm bên trong faCheckCircle.js cho biến ' iconName ':

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

và mã React sẽ giống như sau:

<FontAwesomeIcon icon=check-circle/> 

Chúc may mắn!

Câu trả lời của Alexander từ trên thực sự đã giúp tôi!

Tôi đang cố gắng lấy các biểu tượng tài khoản xã hội ở chân trang của ứng dụng mà tôi đã tạo bằng ReactJS để tôi có thể dễ dàng thêm trạng thái di chuột vào chúng đồng thời để chúng liên kết các tài khoản xã hội của tôi. Đây là những gì tôi phải làm:

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

Sau đó, ở đầu thành phần chân trang của tôi, tôi bao gồm cái này:

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

Thành phần của tôi sau đó trông như thế này:

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

Làm việc như người ở.

Trong trường hợp bạn đang tìm cách bao gồm thư viện phông chữ tuyệt vời mà không cần phải nhập mô-đun và cài đặt npm, hãy đặt nó vào phần đầu của trang React index.html :

public / index.html (trong phần đầu)

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

Sau đó, trong thành phần của bạn (chẳng hạn như App.js) chỉ cần sử dụng quy ước lớp tuyệt vời phông chữ tiêu chuẩn. Chỉ cần nhớ sử dụng className thay vì class:

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

npm install --save font-awesome

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

sau đó

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

Tôi đã trải qua trường hợp này; Tôi cần trang web react / redux sẽ hoạt động hoàn hảo trong quá trình sản xuất.

nhưng có một 'chế độ nghiêm ngặt'; Không nên ăn trưa nó bằng những lệnh này.

yarn global add serve
serve -s build

Sẽ làm việc với chỉ nhấp vào tệp build / index.html. Khi tôi sử dụng fontawesome với npm font-awesome, nó đang hoạt động ở chế độ phát triển nhưng không hoạt động ở 'chế độ nghiêm ngặt'.

Đây là giải pháp của tôi:

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

trong public / index.html

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

Sau tất cả các bước trên, fontawesome hoạt động KHÔNG NGẠI !!!

như 'Praveen MP' đã nói bạn có thể cài đặt phông chữ tuyệt vời dưới dạng một gói. nếu bạn có sợi, bạn có thể chạy:

 yarn add font-awesome

Nếu bạn không có sợi, hãy làm như Praveen đã nói và hãy làm:

npm install --save font-awesome

điều này sẽ thêm gói vào các phụ thuộc dự án của bạn và cài đặt gói trong thư mục node_modules của bạn. trong tệp App.js của bạn, hãy thêm

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

Các biểu tượng phản ứng thanh toán khá dope và hoạt động tốt.

Trong trường hợp của tôi, tôi đã làm theo tài liệu về react-fontawesomegói, nhưng họ không rõ về cách gọi biểu tượng khi đặt các biểu tượng vào thư viện

đây là những gì tôi đã làm:

Tệp app.js

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

Tệp thành phần

<FontAwesomeIcon icon={"coffee"} />

Nhưng tôi đã gặp lỗi này

Sau đó, tôi đã thêm bí danh khi chuyển biểu tượng chống đỡ như:

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

Và nó đang hoạt động, bạn có thể tìm thấy giá trị tiền tố trong tệp icon.js, trong trường hợp của tôi là: faCoffee.js