যখনই আমি প্রতিক্রিয়াতে কোনও ফন্ট আশ্চর্য আইকন ব্যবহার করার চেষ্টা করি render()না কেন এটি ফলাফলটি ওয়েব পৃষ্ঠায় প্রদর্শিত হয় না যদিও এটি সাধারণ এইচটিএমএলে কাজ করে।
render: function() {
return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>;
}
এখানে একটি সরাসরি উদাহরণ: http://jsfiddle.net/pLWS3/
দোষ কোথায়?
উত্তর:
প্রতিক্রিয়াটি ডিওএম-এর classNameমতো বৈশিষ্ট্যটি ব্যবহার করে ।
যদি আপনি উন্নয়ন বিল্ডটি ব্যবহার করেন এবং কনসোলটি দেখুন তবে একটি সতর্কতা রয়েছে। আপনি এটি jsfiddle এ দেখতে পারেন।
সতর্কতা: অজানা DOM সম্পত্তি শ্রেণি। আপনি ক্লাসের নাম বোঝাতে চেয়েছিলেন?
আপনি যদি জেএসকে প্রতিক্রিয়া জানাতে নতুন হন এবং অ্যাপ্লিকেশনটি তৈরি করতে ক্রিয়েট- রিএ্যাক্ট -অ্যাপ্লিকেশন ক্লিপ কমান্ডটি ব্যবহার করেন, তবে ফন্ট-বিস্ময়ের সর্বশেষতম সংস্করণ অন্তর্ভুক্ত করতে নিম্নলিখিত এনপিএম কমান্ডটি চালান।
npm install --save font-awesome
আপনার index.js ফাইলে ফন্ট-দুর্দান্ত লাগান। আপনার সূচি.জেএস ফাইলটিতে কেবল নীচে লাইন যুক্ত করুন
import '../node_modules/font-awesome/css/font-awesome.min.css';
বা
import 'font-awesome/css/font-awesome.min.css';
শ্রেণি নামটি বৈশিষ্ট্য হিসাবে ব্যবহার করতে ভুলবেন না
render: function() {
return <div><i className="fa fa-spinner fa-spin">no spinner but why</i></div>;
}
../node_modules/সেই পথে অন্তর্ভুক্ত করার দরকার নেই ... import 'font-awesome/css/font-awesome.min.css';কাজ করে :)
<i className="far fa-heart"></i>শুধুমাত্র ফন্ট-বিস্ময়কর v5 দিয়ে কাজ করে । এই সমাধানটি ফন্ট-অসাধারণ ভি 4 ইনস্টল করে
আপনি react-fontawesomeআইকন লাইব্রেরিও ব্যবহার করতে পারেন । এখানে লিঙ্কটি রয়েছে: প্রতিক্রিয়া-ফন্টউভাল
এনপিএম পৃষ্ঠা থেকে, কেবল এনপিএমের মাধ্যমে ইনস্টল করুন:
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- এ ফন্ট-দারুণ সিএসএস যুক্ত করতে ভুলবেন না:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
publicফোল্ডারে অনুলিপি করতে হবে এবং সঠিকভাবে srcম্যানুয়ালি স্টাইলশিট যুক্ত করতে হবে ।
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;
@fortawesome/fontawesome-free-regularযেহেতু এটি আপনার উদাহরণ থেকে ব্যবহৃত হচ্ছে না।
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'ফন্টআউভিজইক আইকনটি ডিফল্ট রফতানি নয় mod
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'
কিছুক্ষণ লড়াই করার পরে আমি এই পদ্ধতিটি নিয়ে এসেছি ( এখানে ফন্ট আশ্চর্যর ডকুমেন্টেশনের ভিত্তিতে ):
যেমন বলা হয়েছে, আপনাকে হ'ল ফন্টাউইজ , রিএ্যাক্ট-ফন্টউইউজ এবং ফন্টওয়েজ আইকন লাইব্রেরি ইনস্টল করতে হবে :
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)
আপনার প্রতিক্রিয়া জেএস কোডে আইকনগুলি ব্যবহার করতে, ব্যবহার করুন:
<FontAwesomeIcon icon=icon_name/>
আইকন নামটি সম্পর্কিত আইকনের .js ফাইলে পাওয়া যাবে:
যেমন ' আইকননাম ' ভেরিয়েবলের জন্য ফ্যাক চেক সার্কেল-এর ভিতরে ফ্যাক চেক সার্কেল দেখুন :
...
var iconName = 'check-circle';
...
এবং প্রতিক্রিয়া কোডটি দেখতে এমন হওয়া উচিত:
<FontAwesomeIcon icon=check-circle/>
গুডলাক!
আপনি যদি মডিউল আমদানি এবং এনপিএম ইনস্টল না করে ফন্টটি দুর্দান্ত লাইব্রেরিটি অন্তর্ভুক্ত করতে চান তবে এটিকে আপনার প্রতিক্রিয়া সূচক html পৃষ্ঠার প্রধান বিভাগে রাখুন :
পাবলিক / ইনডেক্স। 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>
উপরে থেকে আলেকজান্ডারের উত্তর আমাকে সত্যিই সাহায্য করেছিল!
আমি রিয়্যাকটিজেএস দিয়ে তৈরি করা আমার অ্যাপ্লিকেশনটির ফুটারে সামাজিক অ্যাকাউন্টগুলির আইকনগুলি পাওয়ার চেষ্টা করছিলাম যাতে আমি তাদের সাথে আমার সামাজিক অ্যাকাউন্টগুলি লিঙ্ক করার সাথে সাথে সহজেই তাদের সাথে একটি হোভারের রাজ্য যুক্ত করতে পারি। এটিই আমি শেষ করতে পেরেছি:
$ 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>
যেমনটি 'প্রবীণ এমপি' বলেছিলেন আপনি প্যাকেজ হিসাবে ফন্ট-অসাধারণ ইনস্টল করতে পারেন। আপনার যদি সুতা থাকে তবে আপনি চালাতে পারেন:
yarn add font-awesome
আপনার কাছে সুতা না থাকলে যেমন প্রবীণ বলেছিলেন এবং করুন:
npm install --save font-awesome
এটি আপনার প্রকল্পগুলির নির্ভরতাতে প্যাকেজ যুক্ত করবে এবং আপনার নোড_মডিউল ফোল্ডারে প্যাকেজটি ইনস্টল করবে। আপনার App.js ফাইল অ্যাড
import 'font-awesome/css/font-awesome.min.css'
আমি এই ক্ষেত্রে অভিজ্ঞ ছিল; আমার প্রতিক্রিয়া / রিডাক্স সাইটটি দরকার যা উত্পাদনে পুরোপুরি কাজ করা উচিত।
তবে একটি 'কঠোর মোড' ছিল; এই আদেশগুলি দিয়ে এটি লাঞ্চ করা উচিত নয়।
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 ***
সর্বজনীন / সূচক। html এ
<link rel="stylesheet" href="%PUBLIC_URL%/css/font-awesome.min.css">
উপরের সমস্ত পদক্ষেপের পরে, হরফ অসাধারণ কাজ !!!
চেকআউট প্রতিক্রিয়া আইকন বেশ ডোপ এবং ভাল কাজ করেছে।
আমার ক্ষেত্রে আমি react-fontawesomeপ্যাকেজের জন্য ডকুমেন্টেশন অনুসরণ করছিলাম , তবে গ্রন্থাগারে আইকনগুলি সেট করার সময় আইকনটি কীভাবে কল করবেন সে সম্পর্কে তারা পরিষ্কার নয় they
এটি আমি করছিলাম:
App.js ফাইল
import {faCoffee} from "@fortawesome/pro-light-svg-icons";
library.add(faSearch, faFileSearch, faCoffee);
উপাদান ফাইল
<FontAwesomeIcon icon={"coffee"} />
তবে আমি এই ত্রুটিটি পাচ্ছিলাম
আইকন প্রপটি পাস করার সময় আমি তার মতো যুক্ত করেছিলাম:
<FontAwesomeIcon icon={["fal", "coffee"]} />
এবং এটি কাজ করছে, আপনি আইকন.জেএস ফাইলটিতে উপসর্গের মানটি পেতে পারেন, আমার ক্ষেত্রে এটি ছিল: ফ্যাকফি.জেএস
<FontAwesomeIcon icon={faCoffee} />
react-fontawesomev4, এবং কিছু সরকারী@fortawesome/fontawesomeউপাদান যা v5 সমর্থন করে তা উল্লেখ করে।