วิธีรวมไอคอน Font Awesome ใน React's render ()

เมื่อใดก็ตามที่ฉันพยายามใช้ไอคอน Font Awesome ใน React render()มันจะไม่ปรากฏบนหน้าเว็บที่ได้แม้ว่ามันจะทำงานใน HTML ปกติก็ตาม

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

นี่คือตัวอย่างสด: http://jsfiddle.net/pLWS3/

มีความผิดตรงไหน?

React ใช้classNameแอตทริบิวต์เช่น DOM

หากคุณใช้รุ่นการพัฒนาและดูที่คอนโซลจะมีคำเตือน คุณสามารถดูสิ่งนี้ได้ใน jsfiddle

คำเตือน: คลาสคุณสมบัติ DOM ที่ไม่รู้จัก คุณหมายถึง className หรือเปล่า

หากคุณยังใหม่กับ React JSและใช้คำสั่งcreate-react-app cliเพื่อสร้างแอปพลิเคชันให้รันคำสั่ง NPM ต่อไปนี้เพื่อรวมฟอนต์รุ่นล่าสุดที่น่ากลัว

npm install --save font-awesome

นำเข้าแบบอักษรที่ยอดเยี่ยมไปยังไฟล์ index.js ของคุณ เพียงเพิ่มบรรทัดด้านล่างในไฟล์ index.js ของคุณ

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

หรือ

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

อย่าลืมใช้classNameเป็นแอตทริบิวต์

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

คุณยังสามารถใช้react-fontawesomeไลบรารีไอคอน นี่คือลิงค์: react-fontawesome

จากหน้า NPM เพียงติดตั้งผ่าน npm:

npm install --save react-fontawesome

ต้องการโมดูล:

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

และสุดท้ายใช้<FontAwesome />องค์ประกอบและส่งผ่านแอตทริบิวต์เพื่อระบุไอคอนและสไตล์:

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

อย่าลืมเพิ่ม CSS แบบอักษรที่ยอดเยี่ยมใน 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

ติดตั้ง 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

จากนั้นในส่วนประกอบของคุณ

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

ใน index.js

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

จากนั้นใช้ไอคอนดังต่อไปนี้:

import React, { Component } from "react";

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

export default Like;

ทางออกที่ง่ายที่สุดคือ:

ติดตั้ง:

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

นำเข้า:

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

ใช้:

<FontAwesomeIcon icon={ faThumbsUp }/>

คุณต้องติดตั้งแพ็คเกจก่อน

npm install --save react-fontawesome

หรือ

npm i --save @fortawesome/react-fontawesome

อย่าลืมใช้classNameแทนclass.

ในภายหลังคุณจะต้องนำเข้าในไฟล์ที่คุณต้องการใช้

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

หรือ

import FontAwesomeIcon from '@fortawesome/react-fontawesome'

หลังจากต่อสู้กับสิ่งนี้มาระยะหนึ่งฉันก็คิดขั้นตอนนี้ขึ้นมา (อ้างอิงจากเอกสารของ Font Awesome ที่นี่ ):

ตามที่ระบุไว้คุณจะต้องติดตั้งไลบรารีไอคอนfontawesome , react-fontawesomeและfontawesome :

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

จากนั้นนำเข้าทุกอย่างไปยังแอป 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)

นี่คือส่วนที่ยุ่งยาก:

หากต้องการเปลี่ยนหรือเพิ่มไอคอนคุณจะต้องค้นหาไอคอนที่มีอยู่ในไลบรารีโมดูลโหนดของคุณเช่น

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

ไอคอนแต่ละคนมีสองไฟล์ที่เกี่ยวข้อง: .js และ .d.ts และชื่อไฟล์ที่บ่งชี้วลีนำเข้า (เห็นได้ชัดเลย ... ) เพื่อเพิ่มความโกรธ , อัญมณีและเครื่องหมายไอคอนลักษณะเช่นนี้

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

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

ในการใช้ไอคอนในโค้ด React js ของคุณให้ใช้:

<FontAwesomeIcon icon=icon_name/>

ชื่อไอคอนสามารถพบได้ในไฟล์. js ของไอคอนที่เกี่ยวข้อง:

เช่นสำหรับfaCheckCircleดูภายในfaCheckCircle.jsสำหรับตัวแปร ' iconName ':

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

และรหัสตอบสนองควรมีลักษณะดังนี้:

<FontAwesomeIcon icon=check-circle/> 

โชคดี!

ในกรณีที่คุณต้องการรวมไลบรารีแบบอักษรที่ยอดเยี่ยมโดยไม่ต้องทำการอิมพอร์ตโมดูลและการติดตั้ง npm ให้วางสิ่งนี้ไว้ในส่วนหัวของหน้าReact index.htmlของคุณ:

public / index.html (ในส่วนหัว)

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

จากนั้นในส่วนประกอบของคุณ (เช่น App.js) เพียงแค่ใช้แบบอักษรมาตรฐานคลาสที่ยอดเยี่ยม อย่าลืมใช้ className แทน class:

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

คำตอบของ Alexander จากด้านบนช่วยฉันได้จริงๆ!

ฉันพยายามรับไอคอนบัญชีโซเชียลในส่วนท้ายของแอพที่ฉันสร้างด้วย ReactJS เพื่อที่ฉันจะได้เพิ่มสถานะโฮเวอร์ให้พวกเขาได้อย่างง่ายดายในขณะที่พวกเขาเชื่อมโยงบัญชีโซเชียลของฉันด้วย นี่คือสิ่งที่ฉันต้องทำ:

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

จากนั้นที่ด้านบนของส่วนประกอบส่วนท้ายฉันรวมสิ่งนี้ไว้:

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

ส่วนประกอบของฉันมีลักษณะดังนี้:

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

ทำงานอย่างมีเสน่ห์

npm install --save font-awesome

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

แล้ว

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

ตามที่ 'Praveen MP' กล่าวว่าคุณสามารถติดตั้งฟอนต์ที่ยอดเยี่ยมเป็นแพ็คเกจได้ หากคุณมีเส้นด้ายคุณสามารถวิ่งได้:

 yarn add font-awesome

หากคุณไม่มีเส้นด้ายทำตามที่ปวีณพูดและทำ:

npm install --save font-awesome

สิ่งนี้จะเพิ่มแพ็คเกจไปยังการอ้างอิงโปรเจ็กต์ของคุณและติดตั้งแพ็คเกจในโฟลเดอร์ node_modules ของคุณ ในไฟล์ App.js ของคุณเพิ่ม

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

ฉันเคยประสบกับกรณีนี้ ฉันต้องการไซต์ react / redux ที่ควรจะทำงานได้อย่างสมบูรณ์ในการผลิต

แต่มี 'โหมดเข้มงวด'; ไม่ควรรับประทานอาหารกลางวันด้วยคำสั่งเหล่านี้

yarn global add serve
serve -s build

ควรทำงานโดยคลิกเฉพาะไฟล์ build / index.html เมื่อฉันใช้ fontawesome กับ npm font-awesome มันทำงานในโหมดการพัฒนา แต่ไม่ทำงานใน 'โหมดเข้มงวด'

นี่คือทางออกของฉัน:

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

ในสาธารณะ / index.html

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

หลังจากทำตามขั้นตอนทั้งหมดแล้ว fontawesome ใช้งานได้ดี !!!

ไอคอนการตอบสนองการชำระเงินค่อนข้างน่าสนใจและทำงานได้ดี

ในกรณีของฉันฉันกำลังติดตามเอกสารสำหรับreact-fontawesomeแพ็คเกจ แต่ไม่ชัดเจนเกี่ยวกับวิธีเรียกไอคอนเมื่อตั้งค่าไอคอนลงในไลบรารี

นี่คือสิ่งที่ฉันกำลังทำ:

App.js ไฟล์

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

ไฟล์คอมโพเนนต์

<FontAwesomeIcon icon={"coffee"} />

แต่ฉันได้รับข้อผิดพลาดนี้

จากนั้นฉันก็เพิ่มนามแฝงเมื่อผ่านไอคอน prop เช่น:

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

และใช้งานได้คุณสามารถค้นหาค่าคำนำหน้าในไฟล์ icon.js ในกรณีของฉันคือ: faCoffee.js