আমি কৌনিক 2+ এবং কৌণিক সিএলআই ব্যবহার করছি।
আমি কীভাবে আমার প্রকল্পে ফন্ট-অসাধারণ যুক্ত করব?
আমি কৌনিক 2+ এবং কৌণিক সিএলআই ব্যবহার করছি।
আমি কীভাবে আমার প্রকল্পে ফন্ট-অসাধারণ যুক্ত করব?
উত্তর:
অ্যাংুলার ২.০ চূড়ান্ত প্রকাশের পরে, কৌণিক 2 সি এল আই প্রকল্পের কাঠামো পরিবর্তন করা হয়েছে - আপনার কোনও বিক্রেতার ফাইলের দরকার নেই, সিস্টেম.জ নেই - কেবল ওয়েবপ্যাক। তুমি যা কর:
npm install font-awesome --save
ইন angular-cli.json
ফাইল সনাক্ত styles[]
অ্যারে এবং এখানে ফন্ট-সন্ত্রস্ত রেফারেন্স ডিরেক্টরির যোগ করুন, নিচের মত:
"apps": [
{
"root": "src",
"outDir": "dist",
....
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/font-awesome/css/font-awesome.css" // -here webpack will automatically build a link css element out of this!?
],
...
}
]
],
কৌণিকের আরও সাম্প্রতিক সংস্করণগুলিতে,
angular.json
ফাইলটি বাদ দিয়ে ফাইলটি ব্যবহার করুন../
। উদাহরণস্বরূপ, ব্যবহার করুন"node_modules/font-awesome/css/font-awesome.css"
।
আপনি চান যে কোনও এইচটিএমএল ফাইলে কিছু ফন্ট-অসাধারণ আইকন রাখুন:
<i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i>
অ্যাপ্লিকেশনটি বন্ধ করুন Ctrl+ এর cপরে অ্যাপ্লিকেশনটি পুনরায় চালিত করুন ng serve
কারণ প্রহরীরা কেবলমাত্র এসআরসি ফোল্ডারের জন্য এবং কৌণিক-ক্লাই.জসন পরিবর্তনের জন্য পরিলক্ষিত হয় না।
addons
পারেন? আমি এটি "ইনস্টল করা তৃতীয় পক্ষের অ্যাডনগুলির জন্য কনফিগারেশন সংরক্ষিত" হিসাবে নথিভুক্ত করেছি । , তবে আমি কৌনিক-সিএলআই কোডটিতে কোনও হ্যান্ডলিং পাই না ।
addons
দায়ের সংক্রান্ত কোনও ডকস আমি খুঁজে পেলাম না ... এটি কিছুক্ষণের জন্য আমার নজরে পড়েছে .. কিছু খুঁজে পেলে আমি আমার উত্তর আপডেট করব।
addons
সম্পত্তি আর ব্যবহার করা হয় না। এর font-awesome.css
অধীন ফাইল অন্তর্ভুক্ত করার পক্ষে এটি যথেষ্ট styles
। দেখুন github.com/angular/angular-cli/blob/master/docs/documentation/...
আপনি যদি SASS ব্যবহার করে থাকেন তবে আপনি কেবল এনপিএম এর মাধ্যমে ইনস্টল করতে পারেন
npm install font-awesome --save
এবং এটি আপনার /src/styles.scss
সাথে আমদানি করুন :
$fa-font-path: "../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome.scss";
পরামর্শ: যখনই সম্ভব, angular-cli
অবকাঠামোগত জগাখিচুড়ি এড়াতে এড়াতে । ;)
ng build && ng serve -w
। কৌনিক-
~
পরিবর্তে ব্যবহার করুন ../node_modules/
, যেমন@import '~font-awesome/scss/font-awesome.scss';
.css
থেকে আমদানি ব্যবহার করুন~font-awesome/css/font-awesome.min.css
এবং এটি কৌনিক 4 / ক্লাইনের জন্য সূক্ষ্ম (ডিফল্ট এফ-ফন্ট-পাথ) কাজ করে
শীর্ষের উত্তরটি কিছুটা পুরানো এবং কিছুটা সহজ উপায় আছে।
এনপিএম মাধ্যমে ইনস্টল করুন
npm install font-awesome --save
আপনার style.css
:
@import '~font-awesome/css/font-awesome.css';
বা আপনার style.scss
:
$fa-font-path: "~font-awesome/fonts";
@import '~font-awesome/scss/font-awesome';
সম্পাদনা: মন্তব্যে উল্লিখিত হিসাবে ফন্টের জন্য লাইনটি আরও নতুন সংস্করণে পরিবর্তন করতে হবে$fa-font-path: "../../../node_modules/font-awesome/fonts";
~
উইস ব্যবহার করে সাসকে সন্ধান করতে হবেnode_module
। আপেক্ষিক পথের চেয়ে এইভাবে এটি করা ভাল। কারণটি হ'ল যদি আপনি এনএমপি তে কোনও উপাদান আপলোড করেন এবং আপনি উপাদান এসএসএসের অভ্যন্তরে ফন্ট-বিস্ময়কর আমদানি করেন তবে এটি সঠিকভাবে কাজ করবে ~ এবং সেই সময়ে যে ভুল হতে পারে সে সম্পর্কিত পাথের সাথে নয়।
এই পদ্ধতিটি সিএসএস থাকা যে কোনও এনপিএম মডিউলের জন্য কাজ করে। এটি স্ক্যাসের জন্যও কাজ করে। যাহোক আপনি যদি আপনার স্টাইলগুলিতে সিএসএস আমদানি করে থাকেন এসএসএসএস এটি কাজ করবে না (এবং এর বিপরীতে হতে পারে)। এখানে কেন
কৌণিক প্রকল্পে ফন্ট-আশ্চর্যজনক ব্যবহারের 3 টি অংশ রয়েছে
স্থাপন
এনপিএম থেকে ইনস্টল করুন এবং আপনার প্যাকেজ.জসনে সংরক্ষণ করুন
npm install --save font-awesome
স্টাইলিং সিএসএস ব্যবহার করা হয়
আপনার স্টাইল। CSS এ .োকান
@import '~font-awesome/css/font-awesome.css';
স্টাইলিং যদি এসসিএসএস ব্যবহার করে থাকে
আপনার স্টাইল.এসএসএস Inোকান
$fa-font-path: "../node_modules/font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';
সরল কৌণিক 2.4+ 4+ এর সাথে ব্যবহার
<i class="fa fa-area-chart"></i>
কৌণিক উপাদান ব্যবহার
আপনার app.module.ts এ কনস্ট্রাক্টরটি ব্যবহার করতে পরিবর্তন করুন MdIconRegistry
export class AppModule {
constructor(matIconRegistry: MatIconRegistry) {
matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
}
}
এবং MatIconModule
আপনার @NgModule
আমদানিতে যুক্ত করুন
@NgModule({
imports: [
MatIconModule,
....
],
declarations: ....
}
এখন যে কোনও টেম্পলেট ফাইলে আপনি এখন করতে পারেন
<mat-icon fontSet="fontawesome" fontIcon="fa-area-chart"></mat-icon>
ফেব্রুয়ারী 2020 আপডেট করুন:
পোর্টওভৌজ প্যাকেজটি এখন সমর্থন করে ng add
তবে এটি কেবল কৌণিক 9 এর জন্য উপলব্ধ :
ng add @fortawesome/angular-fontawesome
আপডেট 8 অক্টোবর 2019:
আপনি একটি নতুন প্যাকেজ ব্যবহার করতে পারেন https://www.npmjs.com/package/@fortawesome/angular-fontawesome
npm install @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
FontAwesomeModule
আমদানিতে যুক্ত করুন src/app/app.module.ts
:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@NgModule({
imports: [
BrowserModule,
FontAwesomeModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
আপনার উপাদানটিতে আইকনটি বেঁধে রাখুন src/app/app.component.ts
:
import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
faCoffee = faCoffee;
}
টেমপ্লেটে আইকনটি ব্যবহার করুন src/app/app.component.html
:
<fa-icon [icon]="faCoffee"></fa-icon>
মূল উত্তর:
আপনি কৌণিক-ফন্ট-দুর্দান্ত এনপিএম মডিউল ব্যবহার করতে পারেন
npm install --save font-awesome angular-font-awesome
মডিউলটি আমদানি করুন:
...
//
import { AngularFontAwesomeModule } from 'angular-font-awesome';
@NgModule({
//...
imports: [
//...
AngularFontAwesomeModule
],
//...
})
export class AppModule { }
আপনি যদি কৌণিক সিএলআই ব্যবহার করে থাকেন তবে কৌণিক-ক্লিপ.জসনের অভ্যন্তরে শৈলীতে ফন্ট-সন্ত্রস্ত সিএসএস যুক্ত করুন
"styles": [
"styles.css",
"../node_modules/font-awesome/css/font-awesome.css"
],
দ্রষ্টব্য: এসসিএসএস প্রিপ্রসেসর ব্যবহার করে কেবল এসএসএসের জন্য সিএসএস পরিবর্তন করুন
উদাহরণ ব্যবহার:
<fa name="cog" animation="spin"></fa>
তার জন্য এখন একটি অফিসিয়াল গল্প আছে
ফন্ট-অসাধারণ লাইব্রেরি ইনস্টল করুন এবং এর উপর নির্ভরতা যুক্ত করুন package.json
npm install --save font-awesome
সিএসএস ব্যবহার করে
আপনার অ্যাপ্লিকেশনটিতে ফন্ট আশ্চর্য সিএসএস আইকন যুক্ত করতে ...
// in .angular-cli.json
"styles": [
"styles.css",
"../node_modules/font-awesome/css/font-awesome.css"
]
SASS ব্যবহার করে
একটি খালি ফাইল তৈরি _variables.scss
মধ্যে src/
।
নিম্নলিখিতগুলিতে এতে যুক্ত করুন _variables.scss
:
$fa-font-path : '../node_modules/font-awesome/fonts';
ইন styles.scss
নিম্নলিখিত যোগ করুন:
@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';
পরীক্ষা
আপনার অ্যাপ্লিকেশনটি বিকাশ মোডে চালাতে এনজি সার্ভ চালান, এবং HTTP: // লোকালহোস্ট: 4200 এ যান ।
হরফ হ'ল ফন্টটি সঠিকভাবে সেট আপ করা হয়েছে, নীচে পরিবর্তন src/app/app.component.html
করুন ...
<h1>
{{title}} <i class="fa fa-check"></i>
</h1>
এই ফাইলটি সংরক্ষণের পরে, অ্যাপের শিরোনামের পাশে ফন্ট আশ্চর্য আইকনটি দেখতে ব্রাউজারে ফিরে যান return
এছাড়াও একটি সম্পর্কিত প্রশ্ন রয়েছে কৌণিক সিএলআই হ'ল ফন্ট-অসাধারণ হরফ ফন্ট ফাইলগুলি ডিফল্ট কৌণিক ক্লাইফ দ্বারা ফন্টগুলি dist
রুটে আউটপুট করে দেয় , এটি কোনও সমস্যা নয়।
../
সামনে থেকে সরান"../node_modules/font-awesome/css/font-awesome.css"
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
আপনার উত্তরটি npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/angular-fontawesome
ডক্সের সমান নয় , যদি স্পষ্টত কিছু অনুপস্থিত থাকে তবে ক্ষমাপ্রার্থী।
সঙ্গে Angular2
RC5 এবংangular-cli 1.0.0-beta.11-webpack.8
আপনি CSS আমদানির সঙ্গে এই অর্জন করতে পারেন।
কেবল দুর্দান্ত ফন্ট ইনস্টল করুন:
npm install font-awesome --save
এবং তারপরে আপনার কনফিগার করা স্টাইল ফাইলগুলির মধ্যে একটিতে ফন্ট-অসাধারণ আমদানি করুন:
@import '../node_modules/font-awesome/css/font-awesome.css';
(স্টাইল ফাইলগুলি এতে কনফিগার করা আছে angular-cli.json
)
zone.js:101 - GET http://localhost:4200/node_modules/font-awesome/css/font-awesome.css 404 (Not Found)
... ফাইলটি আসলে বিদ্যমান তবে মনে হচ্ছে localhost:4200
এই ফোল্ডারের মূল থেকে চলছে না ... ফন্ট-দুর্দান্ত থেকে localhost:4200
রুট ফোল্ডারে কীভাবে প্যাকেজ আপ করা যায় ...
angular-cli@1.0.0-beta.11-webpack.2
এবং স্টাইল ফাইলের কনফিগারেশনটি angular-cli.json
কাজ করছে না ...
1.0.0-beta.11-webpack.8
?
ভেবেছিলাম যে আমি আমার রেজোলিউশনে এটি ফেলে রাখব যেহেতু ফন্ট-দুর্দান্ত এখন তাদের ডকুমেন্টেশন অনুসারে আলাদাভাবে ইনস্টল করা আছে।
npm install --save-dev @fortawesome/fontawesome-free
কেন এটি দুর্ভাগ্যজনক তা এখন আমার হাত থেকে বাঁচে তবে ভেবেছিলাম আমি পুরানো ফন্টে-সন্ত্রস্ত হয়ে ফিরে যাওয়ার চেয়ে সাম্প্রতিকতম সংস্করণটির সাথে লেগে থাকব।
তারপরে আমি এটি আমার স্ক্যাসে আমদানি করেছি
$fa-font-path: "../node_modules/@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/v4-shims";
আশাকরি এটা সাহায্য করবে
কাজের উপরে অনেক নির্দেশাবলী, আমি সেগুলি দেখার পরামর্শ দিই। তবে, লক্ষ্য করার মতো কিছু:
ব্যবহার করে <i class="fas fa-coffee"></i>
কাজ হয়নিইনস্টলেশনের পরেও আমার প্রকল্পে (নতুন অনুশীলন প্রকল্পটি কেবলমাত্র এক সপ্তাহের পুরানো) এবং এখানে নমুনা আইকনটিও গত সপ্তাহের মধ্যে ফন্ট আশ্চর্য থেকে ক্লিপবোর্ডে অনুলিপি করা হয়েছিল।
এটি <i class="fa fa-coffee"></i>
কাজ করে । যদি আপনার প্রকল্পে ফন্ট আশ্চর্যর ইনস্টল করার পরে এটি এখনও কাজ করছে না, আমি পরামর্শ দিচ্ছি যে আপনার আইকনটিতে শ্রেণীর চেক পরীক্ষা করার জন্য 'গুলি' মুছে ফেলবে কিনা তা দেখার জন্য।
এখানে অনেক ভাল উত্তর আছে। তবে আপনি যদি সেগুলির সবগুলি চেষ্টা করে থাকেন এবং তারপরেও ফন্টউইজ আইকনগুলির পরিবর্তে স্কোয়ারগুলি পান তবে আপনার সিএসএসের নিয়মগুলি পরীক্ষা করুন। আমার ক্ষেত্রে আমার নিম্নলিখিত নিয়ম ছিল:
* {
font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}
এবং এটি ফন্টআউজ ফন্টগুলি ওভাররাইড করে আমার সমস্যা সমাধানের *
জন্য কেবল নির্বাচককে প্রতিস্থাপন করুন body
:
body {
font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}
body
কাজ করা উচিত, নিশ্চিত হয়ে নিন যে আপনি ফন্টটি অন্য কোথাও ওভাররাইড করবেন না, আপনি এটিতে ওভাররাইড করছেন h*
বা p
আমরা যেমন করি তেমন ট্যাগ হতে পারে ।
কৌণিক 6 এর জন্য,
প্রথম npm install font-awesome --save
যোগ node_modules/font-awesome/css/font-awesome.css
করার জন্য angular.json ।
মনে রাখবেন যে সামনে কোনও বিন্দু যুক্ত না করা node_modules/
।
এই পোস্টটি বর্ণনা সংহত কিভাবে Fontawesome 5 মধ্যে কৌণিক 6 (কৌণিক 5 এবং পূর্ববর্তী সংস্করণ এছাড়াও কাজ করবে, কিন্তু তারপর তুমি আমার লেখা সমন্বয় আছে)
বিকল্প 1: সিএসএস-ফাইলগুলি যুক্ত করুন
প্রো: প্রতিটি আইকন অন্তর্ভুক্ত করা হবে
বিপরীতে: প্রতিটি আইকন অন্তর্ভুক্ত করা হবে (বড় অ্যাপ্লিকেশন আকার কারণ সমস্ত ফন্ট অন্তর্ভুক্ত)
নিম্নলিখিত প্যাকেজ যুক্ত করুন:
npm install @fortawesome/fontawesome-free-webfonts
এরপরে আপনার কৌনিক.জসনে নিম্নলিখিত লাইনগুলি যুক্ত করুন:
"app": {
....
"styles": [
....
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-regular.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-brands.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css"
],
...
}
বিকল্প 2: কৌণিক প্যাকেজ
প্রো: ছোট অ্যাপের আকার
বিপরীতে: আপনি আলাদাভাবে ব্যবহার করতে চান এমন প্রতিটি আইকন আপনাকে অন্তর্ভুক্ত করতে হবে
ফন্টআউইজ 5 টি কৌণিক প্যাকেজ ব্যবহার করুন:
npm install @fortawesome/angular-fontawesome
আইকনগুলি যুক্ত করতে কেবল তাদের ডকুমেন্টেশন অনুসরণ করুন। তারা এসভিজি-আইকনগুলি ব্যবহার করে, সুতরাং আপনাকে কেবল এসভিজিএস / আইকন যুক্ত করতে হবে, আপনি সত্যই ব্যবহার করেন।
কিছু পরীক্ষার পরে আমি নিম্নলিখিত কাজ পেতে পরিচালিত:
এনপিএম সহ ইনস্টল করুন:
npm install font-awesome --save
যোগ কৌণিক-CLI-build.js ফাইল:
vendorNpmFiles : [
font-awesome/**/*.+(css|css.map|otf|eot|svg|ttf|woff|woff2)',
]
যোগ index.html
<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
মূলটি হ'ল কৌণিক-ক্লিপ-বিল্ড.জেএস ফাইলটিতে ফন্ট ফাইলের প্রকারগুলি অন্তর্ভুক্ত করা
। + + (CSS | css.map | otf | EOT | SVG | TTF | woff | woff2)
angular-cli-build.js
শীর্ষস্থানীয় সাম্প্রতিক ওয়েবপ্যাক শাখায় কোনও নেই
সম্পাদনা করুন: আমি কৌনিক ^ 4.0.0 এবং ইলেক্ট্রন ^ 1.4.3 ব্যবহার করছি
আপনার যদি ইলেক্ট্রনজেএস বা অনুরূপ সমস্যা রয়েছে এবং এক ধরণের 404 ত্রুটি রয়েছে তবে একটি সম্ভাব্য কাজটি আপনার উত্সাহিত করতে হবে webpack.config.js
, যোগ করে (এবং এনপিএমের মাধ্যমে বা প্যাকেজ.জেসন ফাইলটিতে আপনার ফন্ট-বিস্ময়কর নোড মডিউল ইনস্টল করা আছে তা ধরে নিয়ে) :
new CopyWebpackPlugin([
{ from: 'node_modules/font-awesome/fonts', to: 'assets' },
{ from: 'src/assets', to: 'assets' }
]),
মনে রাখবেন যে আমি যে ওয়েবপ্যাক কনফিগারেশনটি ব্যবহার করছি তার src/app/dist
আউটপুট হিসাবে রয়েছে এবং assets
ডিস্টে একটি ফোল্ডার ওয়েবপ্যাক দ্বারা তৈরি করা হয়েছে:
// our angular app
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/app/app',
},
// Config for our build files
output: {
path: helpers.root('src/app/dist'),
filename: '[name].js',
sourceMapFilename: '[name].map',
chunkFilename: '[id].chunk.js'
},
সুতরাং মূলত, বর্তমানে যা ঘটছে তা হ'ল:
dist
সম্পদ ফোল্ডারেরএখন, বিল্ড প্রক্রিয়াটি শেষ হয়ে গেলে, অ্যাপ্লিকেশনটির .scss
ফাইলগুলি এবং আইকনগুলি সহ ফোল্ডারটি সন্ধান করতে হবে এবং সেগুলি সঠিকভাবে সমাধান করতে হবে। তাদের সমাধানের জন্য, আমি এটি আমার ওয়েবপ্যাক কনফিগারেশনে ব্যবহার করেছি:
// support for fonts
{
test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader: 'file-loader?name=dist/[name]-[hash].[ext]'
},
অবশেষে, মধ্যে .scss
ফাইল, আমি ফন্ট-সন্ত্রস্ত .scss আমদানি করছি এবং ফন্ট, যা আবার, পথ সংজ্ঞা, dist/assets/font-awesome/fonts
। পথটি হ'ল dist
কারণ আমার ওয়েবপ্যাক.কনফাইগে আউটপুট.পথ সেট করা আছেhelpers.root('src/app/dist');
সুতরাং, এতে app.scss
:
$fa-font-path: "dist/assets/font-awesome/fonts";
@import "~font-awesome/scss/font-awesome.scss";
মনে রাখবেন যে, এইভাবে, এটি ফন্টের পথটি নির্ধারণ করবে (পরে .scss ফাইলে ব্যবহৃত হবে) এবং ~font-awesome
ফন্ট- দুরন্ত পথটি সমাধান করার জন্য .scss ফাইলটি আমদানি করবে node_modules
।
এটি বেশ কৌতূহলোদ্দীপক, তবে ইলেক্ট্রন.জেএস এর সাথে 404 ত্রুটি সম্পর্কিত সমস্যাটি খুঁজে পাওয়ার একমাত্র উপায়
Https://github.com/AngularClass/angular-starter থেকে শুরু প্রচুর বিভিন্ন কনফিগারেশন সংমিশ্রণটি পরীক্ষা করার পরে, এটিটি এটির সাথে কাজ করার জন্য আমি এখানে যা করেছি did
যেমন ইতিমধ্যে অনেকবার বলা হয়েছে, আমার মধ্যে app.component.scss
:
$fa-font-path: "~font-awesome/fonts" !default;
@import "~font-awesome/scss/font-awesome";
তারপরে ওয়েবপ্যাক.কনফিগ.জেজে (স্টার্টার প্যাকটিতে প্রকৃতপক্ষে ওয়েবপ্যাক.কম)।
প্লাগইন বিভাগে:
new CopyWebpackPlugin([
{ from: 'src/assets', to: 'assets' },
{ from: 'src/meta'},
{ from: 'node_modules/font-awesome/fonts', to: 'assets/fonts/' }
]),
বিধি বিভাগে:
,
{
test: /\.(eot|woff2?|svg|ttf)([\?]?.*)$/,
use: 'file-loader?name=/assets/fonts/[name].[ext]'
}
অ্যাঙ্গুলারসিএলআই 6.0.3 এবং ম্যাটেরিয়াল ডিজাইনের সাথে কাজ করে ফন্টআউভিজ 5.2.0 এর সর্বশেষতম সংস্করণটি পাওয়ার চেষ্টা করে আমি কয়েক ঘন্টা নষ্ট করেছি। আমি ফন্টআউইজ ওয়েবসাইট থেকে এনপিএম ইনস্টলেশন নির্দেশাবলী অনুসরণ করেছি
তাদের সর্বশেষ দস্তাবেজগুলি নিম্নলিখিতটি ব্যবহার করে আপনাকে ইনস্টল করার নির্দেশ দেয়:
npm install @fortawesome/fontawesome-free
বেশ কয়েক ঘন্টা নষ্ট করার পরে অবশেষে আমি এটি আনইনস্টল করে নিচের কমান্ডটি ব্যবহার করে দুর্দান্ত ফন্টটি দুর্দান্তভাবে ইনস্টল করেছি (এটি ফন্টআউজিবল v4.7.0 ইনস্টল করে):
npm install font-awesome --save
এখন এটি ব্যবহার করে ভাল কাজ করছে:
$fa-font-path: "~font-awesome/fonts" !default;
@import "~font-awesome/scss/font-awesome.scss";
<mat-icon fontSet="fontawesome" fontIcon="fa-android"></mat-icon>
ফন্ট জট্টিল আপনি দেয় scalable
আইকন সঙ্গে সঙ্গে কাস্টমাইজড আকার যেতে পারে যে, রঙ, ড্রপ ছায়া, এবং কিছু যে শক্তি দিয়ে করা যাবে ভেক্টরCSS
।
একটি নতুন প্রকল্প তৈরি করুন এবং প্রকল্পে নেভিগেট করুন।
ng new navaApp
cd navaApp
ফন্ট-অসাধারণ লাইব্রেরি ইনস্টল করুন এবং এর উপর নির্ভরতা যুক্ত করুন package.json
।
npm install --save font-awesome
সিএসএস ব্যবহার করে
আপনার অ্যাপ্লিকেশনটিতে ফন্ট আশ্চর্য সিএসএস আইকন যুক্ত করতে ...
// in angular.json
"build": {
"options": {
"styles": [
"../node_modules/font-awesome/css/font-awesome.css",
"src/styles.css"
],
}
}
SASS ব্যবহার করে
SASS দিয়ে নতুন প্রকল্প তৈরি করুন:
ng new cli-app --style=scss
বিদ্যমান প্রকল্পের সাথে ব্যবহার করতে CSS
:
পরিবর্তে সন্ধানের src/styles.css
জন্য src/styles.scss
পরিবর্তন angular.json
করে নামকরণ করুন :styles.scss
css
// in angular.json
"build": {
"options": {
"styles": [
"src/styles.scss"
],
}
}
এটিকে পরিবর্তন styles.css
করতে নিশ্চিত করুন styles.scss
।
একটি খালি ফাইল তৈরি _variables.scss
মধ্যে src/
।
নিম্নলিখিতগুলিতে এতে যুক্ত করুন _variables.scss
:
$fa-font-path : '../node_modules/font-awesome/fonts';
ইন styles.scss
নিম্নলিখিত যোগ করুন:
@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';
আপনি অ্যাঙ্গুলার ফন্ট দুর্দান্ত প্যাকেজটি ব্যবহার করতে পারেন
এনপিএম ইনস্টল - সেভ ফন্ট-দুর্দান্ত কৌণিক-ফন্ট-দুর্দান্ত
এবং তারপরে আপনার মডিউলটিতে আমদানি করুন:
import { AngularFontAwesomeModule } from 'angular-font-awesome';
@NgModule({
//...
imports: [
//...
AngularFontAwesomeModule
],
//...
})
export class AppModule { }
এবং কৌনিক-ক্লাইপ ফাইলে শৈলীটি আমদানি করুন:
"styles": [
"styles.css",
"../node_modules/font-awesome/css/font-awesome.css"
],
এনপিএম লাইব্রেরিতে প্যাকেজ সম্পর্কে আরও বিশদ দেখুন:
এবং তারপরে এটি ব্যবহার করুন:
<i class="fa fa-coffee"></i>
আপনার কৌণিক প্রকল্পে ফন্ট অসাধারণ 5 ব্যবহার করতে, src / index.html ফাইলের নীচে কোডটি সন্নিবেশ করুন।
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
শুভকামনা!
হরফ esome.x এর জন্য সবচেয়ে সহজ উপায় হ'ল নিম্নলিখিতটি,
এনপিএম প্যাকেজ ব্যবহার করে ইনস্টল করুন:
npm install --save @fortawesome/fontawesome-free
আপনার styles.scss
ফাইল অন্তর্ভুক্ত:
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';
দ্রষ্টব্য: আপনার যদি _variables.scss
ফাইল থাকে তবে এটির $fa-font-path
ভিতরে অন্তর্ভুক্ত করা আরও উপযুক্ত এবং styles.scss
ফাইলটিতে নয়।
কম (এসসিএসএস নয়) এবং কৌণিক 2.4.0 এবং স্ট্যান্ডার্ড ওয়েবপ্যাক (অ্যাঙ্গুলার সি এল এল নয়,) নিম্নলিখিতটি আমার পক্ষে কাজ করেছে:
npm install --save font-awesome
এবং (আমার অ্যাপ ডটকম অংশবিশেষে):
@import "~font-awesome/less/font-awesome.less";
এবং অবশ্যই আপনার এই সুস্পষ্ট এবং অত্যন্ত স্বজ্ঞাত স্নিপেটের প্রয়োজন হতে পারে (ওয়েবপ্যাক.কোনফের মডিউল.লোডারগুলিতে)
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
loader: 'file?name=graphics/[name].[ext]'
},
ধরণের ওয়েবপ্যাক ত্রুটিগুলি ঠিক করার জন্য লোডার রয়েছে
"Module parse failed: \node_modules\font-awesome\fonts\fontawesome-webfont.svg?v=4.7.0 Unexpected token (1:0)"
এবং রেজিএক্সপ্যাক্সগুলি সেইসব এসজিজি-রেফারেন্সগুলির সাথে (সংস্করণ নির্দিষ্টকরণের সাথে বা ছাড়াই) মেলে। আপনার ওয়েবপ্যাক সেটআপের উপর নির্ভর করে আপনার এটি প্রয়োজন নাও হতে পারে বা আপনার অন্য কোনও প্রয়োজন হতে পারে।
এটিকে আপনার প্যাকেজটিতে যোগ করুন j জসনকে "ডিভডিপেন্ডেন্সিগুলি" ফন্ট-দুর্দান্ত "" সংস্করণ নম্বর "হিসাবে
আপনি কনফিগার করেছেন কমান্ড প্রম্পট টাইপ npm কমান্ড যান।
আমি ফন্ট অসাধারণ 5+ ব্যবহার করতে চেয়েছিলাম এবং সর্বাধিক উত্তরগুলি পুরানো সংস্করণগুলিতে ফোকাস করে
নতুন ফন্ট আশ্চর্যজনক 5+ এর জন্য কৌণিক প্রকল্পটি এখনও প্রকাশিত হয়নি, সুতরাং আপনি যদি ফন্টের দুর্দান্ত ওয়েবসাইট এটিএম এ উল্লিখিত উদাহরণগুলি ব্যবহার করতে চান তবে আপনাকে প্রায় একটি কাজ ব্যবহার করতে হবে। (বিশেষত দ্রুততম, ক্লাসগুলি এফএ ক্লাসের পরিবর্তে)
আমি আমার স্টাইলস CSS এ স্রেফ সিডিএন আমদানি করেছি ফন্ট আশ্চর্য to স্রেফ এটি যুক্ত করা সেক্ষেত্রে কারও কাছে আমার চেয়ে দ্রুত উত্তর খুঁজে পেতে সহায়তা করে :-)
স্টাইল। CSS এ কোড
@import "https://use.fontawesome.com/releases/v5.0.7/css/all.css";
যদি কোনও কারণে আপনি এনপিএম ন্যূনতম প্যাকেজ ইনস্টল করতে পারবেন না। আপনি সর্বদা index.html সম্পাদনা করতে পারেন এবং ফন্টটিতে দুর্দান্ত ফন্ট যোগ করতে পারেন CSS এবং তারপরে এটি প্রকল্পে ব্যবহৃত হয়েছে।
এখন কৌণিক সিএলআই-তে হরফ ফন্ট ইনস্টল করার কয়েকটি উপায় রয়েছে:
ng add @fortawesome/angular-fontawesome
OR using yarn
yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/angular-fontawesome
OR Using NPM
npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/angular-fontawesome
এখানে রেফারেন্স: https://github.com/FortAwesome/angular-fontawesome