কৌণিক 2 + সিএলআই প্রকল্পে ফন্ট-দুর্দান্ত কীভাবে যুক্ত করবেন


269

আমি কৌনিক 2+ এবং কৌণিক সিএলআই ব্যবহার করছি।

আমি কীভাবে আমার প্রকল্পে ফন্ট-অসাধারণ যুক্ত করব?


আমি একই সমস্যা আছে। এটি সিএলআই দ্বারা ফাইলগুলি উপেক্ষা করা এবং ডেভ মোডে থাকা অবস্থায় অনুলিপি করার মতো নয়। এটি বলেছিল যে কোনও বিল্ডটি সম্পন্ন হওয়ার পরে ফাইলটি / ডিস্ট ডিয়ারে রয়েছে।
থিবস

আমি বুঝতে পারি না, এনপিএমের মাধ্যমে কেন আমাদের ফন্ট-দুর্দান্ত লাগার দরকার আছে, আমরা কেবল ফন্ট-অসাধারণ সিডনির সাথে লিঙ্ক করতে পারি না? আমি কী মিস করছি?
রোসদী কাসিম

4
@ রোসদিকাসিম আপনি সিডিএন-এর সাথে লিঙ্ক করতে পারেন আপনার সূচি ফাইলটি তৈরি করুন। এমন কিছু ঘটনা রয়েছে যখন আপনি যদিও চাইবেন না। কর্পোরেট প্রকল্পগুলি বহিরাগত উত্সগুলিকে মঞ্জুরি দেয় না; সিডিএন নিচে যেতে পারে; সিএলআই আপডেটের জন্য সূচিপত্র HTML ফাইল আপডেট করার প্রয়োজন হতে পারে যাতে আপনার এটি নিশ্চিত করতে হবে যে এটি আপনার বর্তমান লিঙ্কগুলি ওভাররাইট করে না; হরফ-অসাধারণ হ'ল অন্য এনপিএম লিবের জন্য নির্ভরতা হতে পারে; আপনি একটি নির্দিষ্ট সংস্করণে হরফ-ফন্টটি লক করতে চান; আপনার বিল্ড প্রক্রিয়া এটির উপর নির্ভর করতে পারে ... (এবং এইভাবে, আপনি ধারণাটি পাবেন) শেষ পর্যন্ত আপনি কীভাবে এটি আনতে চান তা অবধি
নিক

ওকে ধন্যবাদ ... দেখে মনে হচ্ছে যে আমি খুব একটা মিস করছি না ... আমি কেবল এটি নিশ্চিত করতে চাই যে আমি ভাল এবং বুদ্ধি ... চিয়ার্স বুঝতে পেরেছি।
রোসদী কাসিম

জেএস বা সিএসএস যুক্ত করার জন্য অফিসিয়াল ডকুমেন্টেশনটিও দেখুন: কৌণিক.ইও
গিলিয়াম

উত্তর:


468

অ্যাংুলার ২.০ চূড়ান্ত প্রকাশের পরে, কৌণিক 2 সি এল আই প্রকল্পের কাঠামো পরিবর্তন করা হয়েছে - আপনার কোনও বিক্রেতার ফাইলের দরকার নেই, সিস্টেম.জ নেই - কেবল ওয়েবপ্যাক। তুমি যা কর:

  1. npm install font-awesome --save

  2. ইন 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"

  3. আপনি চান যে কোনও এইচটিএমএল ফাইলে কিছু ফন্ট-অসাধারণ আইকন রাখুন:

    <i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i>
  4. অ্যাপ্লিকেশনটি বন্ধ করুন Ctrl+ এর cপরে অ্যাপ্লিকেশনটি পুনরায় চালিত করুন ng serveকারণ প্রহরীরা কেবলমাত্র এসআরসি ফোল্ডারের জন্য এবং কৌণিক-ক্লাই.জসন পরিবর্তনের জন্য পরিলক্ষিত হয় না।

  5. আপনার দুর্দান্ত আইকন উপভোগ করুন!

3
আপনি কি ব্যাখ্যা করতে addonsপারেন? আমি এটি "ইনস্টল করা তৃতীয় পক্ষের অ্যাডনগুলির জন্য কনফিগারেশন সংরক্ষিত" হিসাবে নথিভুক্ত করেছি , তবে আমি কৌনিক-সিএলআই কোডটিতে কোনও হ্যান্ডলিং পাই না ।
আরজান

1
দুর্ভাগ্যক্রমে @ আরজান এবং @ বিজর্কব্লোম - এই addonsদায়ের সংক্রান্ত কোনও ডকস আমি খুঁজে পেলাম না ... এটি কিছুক্ষণের জন্য আমার নজরে পড়েছে .. কিছু খুঁজে পেলে আমি আমার উত্তর আপডেট করব।
আইয়ন

3
@ রোসদি কাসিম জান - আপনি এটি করতে পারতেন - তবে বড় অ্যাপগুলিতে আপনি সাধারণত সিডিএন ব্যবহার করেন না। প্রথম কারন কেউ তাদের হ্যাক করতে পারে এবং অপ্রত্যক্ষভাবে আপনার অ্যাপ্লিকেশনকে আপস করতে পারে। দ্বিতীয় কারণ এটি কেবল ফন্ট-সন্ত্রস্ত নয় - আপনার অন্যান্য বাহ্যিক লাইব্রেরি যেমন বুটস্ট্র্যাপ, ডিএনডি লাইব্রেরি ইত্যাদির দরকার আছে - যদি আপনার পৃথক http অনুরোধ থাকে - সিডিএন-এর প্রত্যেকটির জন্য, এটি খারাপ কর্মক্ষমতা। এর পরিবর্তে আপনি যা করেন তা হ'ল এনপিএম দিয়ে ডাউনলোড করা - এবং ওয়েবপ্যাক বা কোনও কিছু ব্যবহার করে আপনার সমস্ত কোডের সাথে একক ফাইলে বান্ডিল করুন, এটি মিনিফাইভ করুন এবং কুশলীকরণ করুন - এবং এটিই আপনি মোবাইলে আপনার অ্যাপ চালাতে পারবেন - যেখানে সংস্থানগুলি কম।
আইয়ন

12
দ্রষ্টব্য: addonsসম্পত্তি আর ব্যবহার করা হয় না। এর font-awesome.cssঅধীন ফাইল অন্তর্ভুক্ত করার পক্ষে এটি যথেষ্ট styles। দেখুন github.com/angular/angular-cli/blob/master/docs/documentation/...
0x2D9A3

2
আপডেট: কৌণিক 6.0.0 দিয়ে ফাইলের নামটি .angular-cli.json থেকে Angular.json এ পরিবর্তন করা হয়েছে
মনোজ নেগি

123

আপনি যদি 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। কৌনিক-
ক্লাইফ

33
সর্বোত্তম উত্তর. গৌণ উন্নতি: ~পরিবর্তে ব্যবহার করুন ../node_modules/, যেমন@import '~font-awesome/scss/font-awesome.scss';
m4js7er

5
আমার জন্য কৌনিক 4 এবং এসএসএস নিয়ে কাজ করছে না। আমি সিএসএস দেখতে পাচ্ছি তবে আইকনটি নয়
অনিরুদ্ধ দাস

অ্যাঙ্গুলার 4
ফ্রান্সেসকো

2
.cssথেকে আমদানি ব্যবহার করুন~font-awesome/css/font-awesome.min.css এবং এটি কৌনিক 4 / ক্লাইনের জন্য সূক্ষ্ম (ডিফল্ট এফ-ফন্ট-পাথ) কাজ করে
টিম

67

শীর্ষের উত্তরটি কিছুটা পুরানো এবং কিছুটা সহজ উপায় আছে।

  1. এনপিএম মাধ্যমে ইনস্টল করুন

    npm install font-awesome --save

  2. আপনার 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 । আপেক্ষিক পথের চেয়ে এইভাবে এটি করা ভাল। কারণটি হ'ল যদি আপনি এনএমপি তে কোনও উপাদান আপলোড করেন এবং আপনি উপাদান এসএসএসের অভ্যন্তরে ফন্ট-বিস্ময়কর আমদানি করেন তবে এটি সঠিকভাবে কাজ করবে ~ এবং সেই সময়ে যে ভুল হতে পারে সে সম্পর্কিত পাথের সাথে নয়।

এই পদ্ধতিটি সিএসএস থাকা যে কোনও এনপিএম মডিউলের জন্য কাজ করে। এটি স্ক্যাসের জন্যও কাজ করে। যাহোক আপনি যদি আপনার স্টাইলগুলিতে সিএসএস আমদানি করে থাকেন এসএসএসএস এটি কাজ করবে না (এবং এর বিপরীতে হতে পারে)। এখানে কেন


আপনার পদক্ষেপগুলি অনুসরণ করার পরেও একই ত্রুটি পাওয়া যাচ্ছে।
ইন্দ্র 257

.Ttf, woff এবং woff2 ফাইল লোড করতে ব্যর্থ হয়েছে
indra257

আমি ক্লাইম 1.0 ব্যবহার করছি। কেবলমাত্র ডাবল চেক করার জন্য, আমি একটি নমুনা অ্যাপ্লিকেশন তৈরি করেছি এবং সবেমাত্র ফন্ট-অসাধারণ লোড করেছি এবং অ্যাপটি স্থাপন করেছি। এখনও ত্রুটি পেয়েছি।
ইন্দ্র 257

@ indra257 আমাকে $ এফ-ফন্ট-পাথ যুক্ত করতে হয়েছিল: "../node_modules/font-awesome/fouts"; উপরের নির্দেশাবলীর জন্য
স্টাইল.এসএসএস-এ

আমার প্রকল্পে স্টাইল.এসএসএস ফাইল নেই। স্টাইলসএসএসএসএস ফাইল যুক্ত করার পরে আমাকে কি অন্য কোনও পদক্ষেপ অনুসরণ করতে হবে?
ইন্দ্র 257

51

কৌণিক প্রকল্পে ফন্ট-আশ্চর্যজনক ব্যবহারের 3 টি অংশ রয়েছে

  1. স্থাপন
  2. স্টাইলিং (সিএসএস / এসসিএসএস)
  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>

1
হরফ-ফন্টটি বান্ডিল করতে আপনার কোনও সমস্যা আছে? আমি মনে করি যখন আমরা ক্লাইম ব্যবহার করি তখন মূল বিষয়টি বান্ডিল হয়। tff, woff, woff2 ফাইলগুলি বান্ডিল হচ্ছে না।
ইন্দ্র 257

আমি সবেমাত্র একটি নমুনা অ্যাপ্লিকেশন তৈরি করেছি এবং আপনার পদক্ষেপগুলি অনুসরণ করেছি। এনজি বিল্ড ব্যবহার করে অ্যাপটি বান্ডিল করুন led কনসোলে আমি এখনও দেখছি woff এবং woff2 ফাইল ত্রুটি লোড করতে অক্ষম
ইন্দ্র 257

1
এটাই সঠিক. এটি এনজি পরিবেশনার সাথে পুরোপুরি সূক্ষ্ম কাজ করে। এনজি বিল্ডের সাহায্যে এটি দুর্দান্ত কাজ করে তবে কনসোল দেখায় যে এটি কিছু woff, woff2 ফাইল লোড করতে অক্ষম।
ইন্দ্র 257

আমি একই সমস্যা দেখতে পাচ্ছি না, তাই আমি আশা করি আপনার বিল্ড / কনফিগারেশন ফাইলগুলির মধ্যে কিছু ভুল আছে। আমি আপনাকে একটি পরীক্ষার কেস দিয়ে আপনার সমস্যার প্রতিলিপি তৈরি করতে এবং এটি দিয়ে একটি নতুন প্রশ্ন তৈরি করার পরামর্শ দিচ্ছি।
মাটনউপ

আমি কৌণিক-ক্লিপ ব্যবহার করে এবং একটি ফন্ট-দুর্দান্ত ব্যবহার করে একটি খালি অ্যাপ তৈরি করেছি। আপনি কোন ফাইলগুলি আমাকে পরীক্ষা করতে চান ..
indra257

26

ফেব্রুয়ারী 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>

মূল উত্তর:

বিকল্প 1:

আপনি কৌণিক-ফন্ট-দুর্দান্ত এনপিএম মডিউল ব্যবহার করতে পারেন

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>

ওপটোইন 2:

তার জন্য এখন একটি অফিসিয়াল গল্প আছে

ফন্ট-অসাধারণ লাইব্রেরি ইনস্টল করুন এবং এর উপর নির্ভরতা যুক্ত করুন 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রুটে আউটপুট করে দেয় , এটি কোনও সমস্যা নয়।


বিকল্প 1 ব্যবহার করার সময়, ../সামনে থেকে সরান"../node_modules/font-awesome/css/font-awesome.css"
আলফ মোহ

আমার কেন নতুন কৌণিক প্যাকেজটি ব্যবহার করার কথা? এগুলি পৃথকভাবে আমদানি করার জন্য পিটা-র আরও বেশি কিছু মনে হয়।
এমডিভে

1
আমি বোঝাতে চাইছি যে 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ডক্সের সমান নয় , যদি স্পষ্টত কিছু অনুপস্থিত থাকে তবে ক্ষমাপ্রার্থী।
ব্যবহারকারীর 632716

1
@ ব্যবহারকারীর 632716 ঠিক আছে, এনএমপি ইনস্টল কমান্ডে অনুপস্থিত প্যাকেজটি জুড়েছে।
kuncevic.dev

1
অনেক ধন্যবাদ ... আমি দুর্দান্ত 9+ ফন্টের সন্ধান করছিলাম। 1 দিন অপচয় করার পরে আপডেট 2020 ফেব্রুয়ারী helpful
তেজশ্রী

15

সঙ্গে Angular2RC5 এবং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)


1
দেখে মনে হচ্ছে এটি আমদানির চেষ্টা করছে তবে একটি ত্রুটি পেয়েছে zone.js:101 - GET http://localhost:4200/node_modules/font-awesome/css/font-awesome.css 404 (Not Found) ... ফাইলটি আসলে বিদ্যমান তবে মনে হচ্ছে localhost:4200এই ফোল্ডারের মূল থেকে চলছে না ... ফন্ট-দুর্দান্ত থেকে localhost:4200রুট ফোল্ডারে কীভাবে প্যাকেজ আপ করা যায় ...
মাইক্রোচিপ 78৮

এছাড়াও আমি ব্যবহার করছি angular-cli@1.0.0-beta.11-webpack.2এবং স্টাইল ফাইলের কনফিগারেশনটি angular-cli.jsonকাজ করছে না ...
মাইক্রোচিপ 78

1
হুম যে আজব, সম্ভবত আপগ্রেড 1.0.0-beta.11-webpack.8?
shusson

13

ভেবেছিলাম যে আমি আমার রেজোলিউশনে এটি ফেলে রাখব যেহেতু ফন্ট-দুর্দান্ত এখন তাদের ডকুমেন্টেশন অনুসারে আলাদাভাবে ইনস্টল করা আছে।

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

আশাকরি এটা সাহায্য করবে


5

কাজের উপরে অনেক নির্দেশাবলী, আমি সেগুলি দেখার পরামর্শ দিই। তবে, লক্ষ্য করার মতো কিছু:

ব্যবহার করে <i class="fas fa-coffee"></i> কাজ হয়নিইনস্টলেশনের পরেও আমার প্রকল্পে (নতুন অনুশীলন প্রকল্পটি কেবলমাত্র এক সপ্তাহের পুরানো) এবং এখানে নমুনা আইকনটিও গত সপ্তাহের মধ্যে ফন্ট আশ্চর্য থেকে ক্লিপবোর্ডে অনুলিপি করা হয়েছিল।

এটি <i class="fa fa-coffee"></i> কাজ করে । যদি আপনার প্রকল্পে ফন্ট আশ্চর্যর ইনস্টল করার পরে এটি এখনও কাজ করছে না, আমি পরামর্শ দিচ্ছি যে আপনার আইকনটিতে শ্রেণীর চেক পরীক্ষা করার জন্য 'গুলি' মুছে ফেলবে কিনা তা দেখার জন্য।


4

এখানে অনেক ভাল উত্তর আছে। তবে আপনি যদি সেগুলির সবগুলি চেষ্টা করে থাকেন এবং তারপরেও ফন্টউইজ আইকনগুলির পরিবর্তে স্কোয়ারগুলি পান তবে আপনার সিএসএসের নিয়মগুলি পরীক্ষা করুন। আমার ক্ষেত্রে আমার নিম্নলিখিত নিয়ম ছিল:

* {
  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আমরা যেমন করি তেমন ট্যাগ হতে পারে ।
বাণিজ্যিক আত্মহত্যা

ইয়া কিছু এটিকে ওভাররাইড করে চলেছে বলে মনে হচ্ছে তবে আমি মনে করি এটি আমার নিজের কোড নয় বলে আমি মনে করি এটি কেবল ক্রোম ডিফল্ট হতে পারে যদিও এটি সেট করেছি! গুরুত্বপূর্ণ এবং এটি এখনও ওভাররাইড হয়ে গেছে বলে মনে হচ্ছে। আমি এটি আরও দেখতে হবে।
জেগারস্টেল

আমি এটি ব্যবহার করে পেয়েছি: একই (নির্বাচক) একই * নির্বাচক রাখার জন্য নয়, তবে ফন্ট-দুর্দান্ত ব্যবহার করে কোনও লক্ষ্যবস্তু রাখবেন না
jgerstle

4

কৌণিক 6 এর জন্য,

প্রথম npm install font-awesome --save

যোগ node_modules/font-awesome/css/font-awesome.cssকরার জন্য angular.json

মনে রাখবেন যে সামনে কোনও বিন্দু যুক্ত না করা node_modules/


2
আমি যখন এটি করি তখন আমি চিত্রগুলির জন্য কেবল স্কোয়ার দিয়ে শেষ করি।
গারগোয়েল

এখানে একই, আপনি স্কোয়ারগুলি কীভাবে সরিয়েছেন? @ গারগোয়েল
অ্যাঙ্গুলার এম

4

এই পোস্টটি বর্ণনা সংহত কিভাবে 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

আইকনগুলি যুক্ত করতে কেবল তাদের ডকুমেন্টেশন অনুসরণ করুন। তারা এসভিজি-আইকনগুলি ব্যবহার করে, সুতরাং আপনাকে কেবল এসভিজিএস / আইকন যুক্ত করতে হবে, আপনি সত্যই ব্যবহার করেন।


আপনার পাথগুলি @ ফিফটওয়্যার দিয়ে শুরু করুন। 'ফর্ট' শব্দটি লক্ষ্য করুন, 'ফন্ট' নয়, আমার ইনস্টলটিও এটি করছে। কেউ কি জানেন যে এই কি হয়?
হেলজগেট

কিছু মনে করবেন না, দৃশ্যত তাদের কিছু নামকরণ কাঠামো চলছে going দেখুন এই গিটহাব পোস্ট
Helzgate

@ অনিকেটলে কি কাজ হচ্ছে না? আমি দুটি বিকল্প উপস্থাপন করেছি
পল

3

কিছু পরীক্ষার পরে আমি নিম্নলিখিত কাজ পেতে পরিচালিত:

  1. এনপিএম সহ ইনস্টল করুন:

    npm install font-awesome --save
    
  2. যোগ কৌণিক-CLI-build.js ফাইল:

    vendorNpmFiles : [
        font-awesome/**/*.+(css|css.map|otf|eot|svg|ttf|woff|woff2)',
    ]
    
  3. যোগ index.html

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

মূলটি হ'ল কৌণিক-ক্লিপ-বিল্ড.জেএস ফাইলটিতে ফন্ট ফাইলের প্রকারগুলি অন্তর্ভুক্ত করা

। + + (CSS | css.map | otf | EOT | SVG | TTF | woff | woff2)


1
angular-cli-build.jsশীর্ষস্থানীয় সাম্প্রতিক ওয়েবপ্যাক শাখায় কোনও নেই
uss

এছাড়াও, বিক্রেতার এনপিএমফায়ালগুলি বর্তমান অ্যাঙ্গুলার-সিএলআই কোডে পাওয়া যায় না । অ্যালনের গৃহীত উত্তর দেখে আমার ধারণা এই পুরানো?
আরজান

1
@ আরজান হ্যাঁ, এই উত্তরটি পুরানো ... এটি পূর্ব ওয়েবপ্যাক সি এল এলির জন্য ছিল। অ্যালনের উত্তর হ'ল গৃহীত উত্তর
নিক

3

গৃহীত উত্তর পুরানো।

কৌণিক 9 এবং ফন্টাওয়াস 5 এর জন্য

  1. ফন্টআউভেল ইনস্টল করুন

    এনপিএম ইনস্টল করুন @ ফটওউওয়েজ / ফন্টউইজ-ফ্রি - সেভ করুন

  2. শৈলীর অধীনে এটি কৌণিক.জসনে নিবন্ধন করুন

    "Node_modules/@fortawesome/fontawesome-free/css/all.min.css"

  3. আপনার অ্যাপ্লিকেশন এ এটি ব্যবহার করুন


2

সম্পাদনা করুন: আমি কৌনিক ^ 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'
},

সুতরাং মূলত, বর্তমানে যা ঘটছে তা হ'ল:

  • ওয়েবপ্যাক হ'ল ফন্ট ফোল্ডারটি ডেভ সম্পদ ফোল্ডারে নকল করছে।
  • Webpack ফোল্ডার দেব সম্পদ অনুলিপি করা হয় 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 ত্রুটি সম্পর্কিত সমস্যাটি খুঁজে পাওয়ার একমাত্র উপায়


2

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]'
}

2

অ্যাঙ্গুলারসিএলআই 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>

2

ফন্ট জট্টিল আপনি দেয় 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.scsscss

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

এটি একটি ভাল প্রশ্ন। এটি আমার কাছে সর্বদা একটি প্রশ্ন ছিল
সৈয়দ আলী মাহমুদী

2

আপনি অ্যাঙ্গুলার ফন্ট দুর্দান্ত প্যাকেজটি ব্যবহার করতে পারেন

এনপিএম ইনস্টল - সেভ ফন্ট-দুর্দান্ত কৌণিক-ফন্ট-দুর্দান্ত

এবং তারপরে আপনার মডিউলটিতে আমদানি করুন:

import { AngularFontAwesomeModule } from 'angular-font-awesome';
     @NgModule({
       //...
      imports: [
        //...
        AngularFontAwesomeModule
      ],
      //...
    })
    export class AppModule { }

এবং কৌনিক-ক্লাইপ ফাইলে শৈলীটি আমদানি করুন:

   "styles": [
        "styles.css",
        "../node_modules/font-awesome/css/font-awesome.css"
    ],

এনপিএম লাইব্রেরিতে প্যাকেজ সম্পর্কে আরও বিশদ দেখুন:

https://www.npmjs.com/package/angular-font-awesome

এবং তারপরে এটি ব্যবহার করুন:

<i class="fa fa-coffee"></i>


2

আপনার কৌণিক প্রকল্পে ফন্ট অসাধারণ 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">

শুভকামনা!


2

হরফ 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ফাইলটিতে নয়।


1

কম (এসসিএসএস নয়) এবং কৌণিক 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)" 

এবং রেজিএক্সপ্যাক্সগুলি সেইসব এসজিজি-রেফারেন্সগুলির সাথে (সংস্করণ নির্দিষ্টকরণের সাথে বা ছাড়াই) মেলে। আপনার ওয়েবপ্যাক সেটআপের উপর নির্ভর করে আপনার এটি প্রয়োজন নাও হতে পারে বা আপনার অন্য কোনও প্রয়োজন হতে পারে।


1

এটিকে আপনার প্যাকেজটিতে যোগ করুন j জসনকে "ডিভডিপেন্ডেন্সিগুলি" ফন্ট-দুর্দান্ত "" সংস্করণ নম্বর "হিসাবে

আপনি কনফিগার করেছেন কমান্ড প্রম্পট টাইপ npm কমান্ড যান।


আপনার চূড়ান্ত বিল্ডে এটির প্রয়োজন হওয়ায় আপনি 'ডিভ-নির্ভরতা' নয়, আপনার 'নির্ভরতা'গুলিতে ফন্ট-সন্ত্রস্ত যুক্ত করতে চাইবেন। এছাড়াও উপরের নির্দেশাবলীর জবাব দেয় না যে একবার আপনার প্যাকেজ.জসন ফাইলটিতে যুক্ত হয়ে গেলে কৌণিক প্রকল্প কীভাবে এটি গ্রহণ করবে।
নিক

1

আমি ফন্ট অসাধারণ 5+ ব্যবহার করতে চেয়েছিলাম এবং সর্বাধিক উত্তরগুলি পুরানো সংস্করণগুলিতে ফোকাস করে

নতুন ফন্ট আশ্চর্যজনক 5+ এর জন্য কৌণিক প্রকল্পটি এখনও প্রকাশিত হয়নি, সুতরাং আপনি যদি ফন্টের দুর্দান্ত ওয়েবসাইট এটিএম এ উল্লিখিত উদাহরণগুলি ব্যবহার করতে চান তবে আপনাকে প্রায় একটি কাজ ব্যবহার করতে হবে। (বিশেষত দ্রুততম, ক্লাসগুলি এফএ ক্লাসের পরিবর্তে)

আমি আমার স্টাইলস CSS এ স্রেফ সিডিএন আমদানি করেছি ফন্ট আশ্চর্য to স্রেফ এটি যুক্ত করা সেক্ষেত্রে কারও কাছে আমার চেয়ে দ্রুত উত্তর খুঁজে পেতে সহায়তা করে :-)

স্টাইল। CSS এ কোড

@import "https://use.fontawesome.com/releases/v5.0.7/css/all.css";

আমি এই চেষ্টা করেছিলাম। স্থানীয়ভাবে ভাল কাজ করে, কিন্তু যখন আমি এটি তৈরির চেষ্টা করি তখন আইকনগুলি হারিয়ে যায়।
পীযূষ চৌধুরী চৌদ্দ

1

যদি কোনও কারণে আপনি এনপিএম ন্যূনতম প্যাকেজ ইনস্টল করতে পারবেন না। আপনি সর্বদা index.html সম্পাদনা করতে পারেন এবং ফন্টটিতে দুর্দান্ত ফন্ট যোগ করতে পারেন CSS এবং তারপরে এটি প্রকল্পে ব্যবহৃত হয়েছে।


1

ওয়েবপ্যাক 2 ব্যবহারের জন্য:

{
 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
                    loader: "file-loader"
}

পরিবর্তে file-loader?name=/assets/fonts/[name].[ext]



1

এখন কৌণিক সিএলআই-তে হরফ ফন্ট ইনস্টল করার কয়েকটি উপায় রয়েছে:

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

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.