React के रेंडर में एक फ़ॉन्ट विस्मयकारी आइकन कैसे शामिल करें ()

Question

जब भी मैं रिएक्ट में एक फ़ॉन्ट विस्मयकारी आइकन का उपयोग करने की कोशिश करता हूं render() , तो यह परिणामी वेब पेज पर प्रदर्शित नहीं होता है, हालांकि यह सामान्य HTML में काम करता है।

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

यहाँ एक जीवंत उदाहरण है: http://jsfiddle.net/pLWS3/

कहां गलती है?

Comments

ध्यान दें कि कुछ पुराने उत्तर react-fontawesomev4 @fortawesome/fontawesomeका समर्थन करते हैं, और कुछ v5 का समर्थन करने वाले आधिकारिक घटक को संदर्भित करते हैं ।

— jinglesthula

और यहाँ रिएक्शन-

— फॉन्टव्यू

Answer 1

प्रतिक्रिया classNameडोम की तरह विशेषता का उपयोग करती है ।

यदि आप विकास बिल्ड का उपयोग करते हैं, और कंसोल को देखें, तो एक चेतावनी है। आप इसे jsfiddle पर देख सकते हैं।

चेतावनी: अज्ञात DOM संपत्ति वर्ग। क्या आपका मतलब था क्लासनेम?

Comments

कि काम reactjs के लिए संभव है 15.6 मैं लिंक index.html <link rel = "शॉर्टकट आइकन" href = "जोड़ा maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/... "> नहीं बल्कि काम कर सकते हैं

— rahuldm

Answer 2

यदि आप जेएस को रीएक्ट करने के लिए नए हैं और एप्लिकेशन बनाने के लिए create-react-app-cli कमांड का उपयोग कर रहे हैं, तो फ़ॉन्ट-कमाल के नवीनतम संस्करण को शामिल करने के लिए निम्न एनपीएम कमांड चलाएं।

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

Comments

यह वास्तव में उत्तर है जो प्रारंभिक प्रश्न को सबसे अच्छा स्पष्ट करता है।

— nacho_dh

बस इस बात पर ध्यान दें कि क्रिएट-रिएक्शन-ऐप सेटअप के साथ, आपको ../node_modules/पथ में शामिल करने की आवश्यकता नहीं है ... import 'font-awesome/css/font-awesome.min.css';कार्य :)

— plong0

लेकिन इस तरह से जब हम <i className = "far fa-heart"> </ i> जैसे आइकन जोड़ते हैं, तो यह रेंडर नहीं होता है। लेकिन अगर हम <i className = "fa fa-heart"> </ i> जोड़ते हैं तो यह प्रतिपादन करता है। यही कारण है कि ?

— थिडासा पंकजा

@ThidasaParanavitharana <i className="far fa-heart"></i>केवल फ़ॉन्ट-भयानक v5 के साथ काम करता है। यह समाधान फ़ॉन्ट-भयानक v4

— XeniaSis

Answer 3

आप react-fontawesomeआइकन लाइब्रेरी का भी उपयोग कर सकते हैं । यहाँ लिंक है: प्रतिक्रिया-फॉन्टव्यू

एनपीएम पेज से, बस 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)' }}
      />
    );
  }
});

Index.html में font-awesome CSS जोड़ना न भूलें:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

Comments

फ़ॉन्ट विस्मयकारी सीएसएस को अपने सूचकांक में भी जोड़ना न भूलें:<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

— sdgfsdh

क्या आपको अभी भी एक सीडीएन शामिल करने की आवश्यकता है यदि आप इसे एनपीएम के माध्यम से स्थापित करते हैं?

— अमितुहुश

@Amituuush "एनपीएम के माध्यम से" एफए स्थापित करना (अभी के लिए) इसे वहां नहीं डालता जहां इसे होने की आवश्यकता है। आपको हमेशा अपने संबंधित publicफ़ोल्डर में इसे कॉपी करना होगा और srcमैन्युअल रूप से सही के साथ स्टाइलशीट जोड़ना होगा ।

— डोमी

नई CDN लिंक: <link href = "// maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "स्टाइलशीट">

— GuyA

यहाँ प्रतिक्रिया-फ़ॉन्ट लेखक। आपको अपने एप्लिकेशन में शैलियों / फोंट को किसी भी तरह से शामिल करना होगा, या तो सीडीएन संस्करण के साथ या वेबपैक जैसी किसी चीज़ का उपयोग करके या केवल डाउनलोड किए गए संस्करणों से लिंक करके। इस पुस्तकालय के साथ लक्ष्य वेबपैक

— दाना वुडमैन

Answer 4

https://github.com/FortAwesome/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;

Comments

क्या आपको वास्तव में इसकी आवश्यकता है: @fortawesome/fontawesome-free-regularक्योंकि इसका उपयोग आपके उदाहरण से नहीं किया जा रहा है।

— gajajivu

@ गैबेनो हे नोप, इसका सिर्फ एक उदाहरण है। यह बस यू / याद रखना चाहिए कि आप दूसरे का भी उपयोग कर सकते हैं। लेकिन संकेत के लिए thx, मैं एक टिप्पणी जोड़ना चाहिए।

— अलेक्जेंडर सिदिकोव फेफिफ़

महान! बस इस import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'FontAwesomeIcon को संशोधित करने की आवश्यकता है डिफ़ॉल्ट निर्यात अब और नहीं है।

— मोहितघोडसरा

Answer 5

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;

Answer 6

सबसे सरल उपाय है:

इंस्टॉल:

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

Answer 7

आपको पहले पैकेज को स्थापित करने की आवश्यकता है।

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'

Answer 8

एक के लिए इस के साथ संघर्ष करने के बाद मैं इस प्रक्रिया के साथ आया था, जबकि (फ़ॉन्ट बहुत बढ़िया के प्रलेखन के आधार पर यहाँ ):

जैसा कि कहा गया है, आपको फॉन्टवॉव , रिएक्शन-फॉन्टवैल और फॉन्टवॉच आइकन्स लाइब्रेरी स्थापित करनी होगी :

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

और फिर अपने रिएक्ट ऐप में सब कुछ आयात करें:

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)

अपने रिएक्ट js कोड में आइकन का उपयोग करने के लिए, उपयोग करें:

<FontAwesomeIcon icon=icon_name/>

आइकन का नाम प्रासंगिक आइकन .js फ़ाइल में पाया जा सकता है:

उदाहरण के लिए faCheckCircle अंदर देखो faCheckCircle.js 'के लिए iconName ' चर:

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

और प्रतिक्रिया कोड इस तरह दिखना चाहिए:

<FontAwesomeIcon icon=check-circle/> 

सौभाग्य!

Answer 9

ऊपर से अलेक्जेंडर के जवाब ने वास्तव में मेरी मदद की!

मैं रिएक्टजेएस के साथ बनाए गए अपने ऐप के पाद लेख में सोशल अकाउंट आइकन प्राप्त करने की कोशिश कर रहा था ताकि मैं आसानी से उनके साथ एक हॉवर स्टेट जोड़ सकूं जबकि उनके पास भी मेरे सोशल अकाउंट लिंक हैं। यह वही है जो मैंने किया है:

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

एक जादू की तरह काम किया।

Answer 10

यदि आप मॉड्यूल इंपोर्ट और एनपीएम इंस्टॉलेशन किए बिना फ़ॉन्ट भयानक लाइब्रेरी को शामिल करना चाहते हैं, तो इसे अपने रिएक्ट इंडेक्स के मुख्य भाग में डालें। पेज:

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) बस मानक फ़ॉन्ट भयानक वर्ग सम्मेलन का उपयोग करें। क्लास के बजाय क्लासनेम का उपयोग करना याद रखें:

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

Answer 11

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>

Answer 12

जैसा कि 'प्रवीण सांसद' ने कहा कि आप एक पैकेज के रूप में फ़ॉन्ट-भयानक स्थापित कर सकते हैं। यदि आपके पास यार्न है तो आप चला सकते हैं:

 yarn add font-awesome

यदि आपके पास यार्न नहीं है जैसा कि प्रवीण ने कहा और करते हैं:

npm install --save font-awesome

यह पैकेज को आपकी परियोजनाओं की निर्भरता में जोड़ देगा और पैकेज को आपके नोड_मॉडल फ़ोल्डर में स्थापित कर देगा। अपने App.js फ़ाइल में जोड़ें

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

Answer 13

मैं इस मामले में अनुभवी था; मुझे प्रतिक्रिया / रिडक्स साइट की आवश्यकता है जो उत्पादन में पूरी तरह से काम कर रही हो।

लेकिन एक 'सख्त मोड' था; इन आदेशों के साथ इसे दोपहर का भोजन नहीं करना चाहिए।

yarn global add serve
serve -s build

केवल बिल्ड / इंडेक्स। Html फ़ाइल के साथ काम करना चाहिए। जब मैंने एनपीटी फ़ॉन्ट-भयानक के साथ फॉन्टवॉएट का इस्तेमाल किया, तो यह विकास मोड में काम कर रहा था, लेकिन 'सख्त मोड' में काम नहीं कर रहा था।

यहाँ मेरा समाधान है:

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

in public / index.html

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

उपरोक्त सभी चरणों के बाद, फॉन्टवॉली NICELY काम करता है !!!

Answer 14

चेकआउट माउस के डोप पर प्रतिक्रिया करता है और अच्छी तरह से काम करता है।

Answer 15

मेरे मामले में मैं react-fontawesomeपैकेज के लिए दस्तावेज़ीकरण का पालन कर रहा था , लेकिन वे लाइब्रेरी में आइकन सेट करते समय आइकन को कॉल करने के तरीके के बारे में स्पष्ट नहीं हैं

यह वही है जो मैं कर रहा था:

App.js फ़ाइल

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

घटक फ़ाइल

<FontAwesomeIcon icon={"coffee"} />

लेकिन मुझे यह त्रुटि मिल रही थी

फिर मैंने आइकन प्रोप को पास करते समय उपनाम जोड़ा:

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

और यह काम कर रहा है, आप icon.js फ़ाइल में उपसर्ग मान पा सकते हैं, मेरे मामले में था: faCfish.js

Comments

पहले विकल्प के लिए, आपको ऐसा करना चाहिए:<FontAwesomeIcon icon={faCoffee} />

— गिल्डनी