269

मैं Angular 2+ और Angular CLI का उपयोग कर रहा हूं।

मैं अपने प्रोजेक्ट में फ़ॉन्ट-कमाल कैसे जोड़ूं?

angular webpack angular-cli

— Nik
स्रोत

मेरे साथ भी वही दिक्कत है। यह ऐसा है जैसे फाइलों को सीएलआई द्वारा नजरअंदाज किया जाता है और जब देव मोड में कॉपी नहीं किया जाता है। उस ने कहा, जब एक निर्माण किया जाता है, तो फ़ाइल / डिस्ट डिर में होती है।

— थिब्स

मुझे समझ नहीं आता, हमें npm के माध्यम से फ़ॉन्ट-भयानक जोड़ने की आवश्यकता क्यों है, क्या हम फ़ॉन्ट-भयानक cdn से लिंक नहीं कर सकते? मैं क्या खो रहा हूँ?

— रोजी कासिम

4

@RosdiKasim आप अपनी अनुक्रमणिका फ़ाइल cdn से लिंक कर सकते हैं। ऐसे मामले हैं जब आप हालांकि नहीं चाहते हैं। कॉर्पोरेट प्रोजेक्ट बाहरी स्रोतों की अनुमति नहीं दे सकते हैं; सीडीएन नीचे जा सकता है; CLI अपडेट को index.html फ़ाइल को अपडेट करने की आवश्यकता हो सकती है, इसलिए आपको यह सुनिश्चित करना होगा कि यह आपके वर्तमान लिंक को ओवरराइट न करे; फ़ॉन्ट-कमाल दूसरे npm के लिए एक निर्भरता हो सकती है; आप एक निश्चित संस्करण के लिए फ़ॉन्ट-भयानक लॉक करना चाहते हैं; आपकी निर्माण प्रक्रिया इस पर निर्भर हो सकती है ... (और इसी तरह, आपको यह विचार मिलता है) अंत में, आप इसे कैसे लाना चाहते हैं।

— निक

ठीक है धन्यवाद ... लगता है कि मैं बहुत याद नहीं कर रहा हूँ ... मैं सिर्फ यह सुनिश्चित करना चाहता हूं कि मैं पेशेवरों और विपक्ष को समझूं ... चीयर्स।

— रोजी कासिम

JS या CSS जोड़ने के लिए आधिकारिक दस्तावेज भी देखें: angular.io/guide/…

— Guillaume Husta

468

एंगुलर 2.0 फाइनल रिलीज़ के बाद, एंगुलर 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"।
अपनी इच्छित किसी भी HTML फ़ाइल में कुछ फ़ॉन्ट-भयानक आइकन रखें:
```
 
```
एप्लिकेशन को रोकें Ctrl+ cफिर ऐप का उपयोग करके फिर से चलाएँ ng serveक्योंकि वॉचर्स केवल src फ़ोल्डर के लिए हैं और कोणीय-cli.json परिवर्तनों के लिए नहीं देखे गए हैं।
अपने भयानक माउस का आनंद लें!

— कथा
स्रोत

3

क्या आप बता सकते हैं कि क्या addonsकरता है? मैं देखता हूं कि इसे "थर्ड पार्टी ऐडऑन्स के लिए आरक्षित कॉन्फ़िगरेशन" के रूप में प्रलेखित किया गया है । , लेकिन मुझे कोणीय-सीएलआई कोड में कोई हैंडलिंग नहीं मिल रही है ।

— अर्जन

1

दुर्भाग्यवश @Arjan & @bjorkblom - मुझे इस addonsफाइल के बारे में कोई डॉक्स नहीं मिला ... यह अब कुछ समय के लिए मेरे ध्यान में है .. मैं एक बार कुछ ढूंढने के बाद अपना जवाब अपडेट करूंगा।

— एआईओएन

3

@ रोसदी कासिम जान - आप ऐसा कर सकते थे - लेकिन बड़े ऐप्स में आमतौर पर आप सीडी का इस्तेमाल नहीं करते। पहले क्योंकि कोई उन्हें हैक कर सकता है और अप्रत्यक्ष रूप से आपके ऐप से समझौता कर सकता है। दूसरा, क्योंकि यह केवल फ़ॉन्ट-भयानक नहीं है - आपको अन्य बाहरी पुस्तकालयों जैसे बूटस्ट्रैप, डंड लाइब्रेरी आदि की आवश्यकता है - यदि आपके पास अलग-अलग http अनुरोध है - एक सीडीएन के लिए - उनमें से प्रत्येक के लिए, यह खराब प्रदर्शन है। इसके बजाय आप क्या करते हैं, npm के साथ डाउनलोड किया जाता है - और वेबपैक या किसी चीज़ का उपयोग करके एक ही फ़ाइल में अपने सभी कोड के साथ बंडल करें, उसे संक्षिप्त करें और उसे बताएं - और इसी तरह आप अपने ऐप को मोबाइल पर चला सकते हैं - जहां संसाधन कम हैं।

— एआईऑन

12

नोट: addonsसंपत्ति का उपयोग नहीं किया जाता है। के font-awesome.cssतहत फ़ाइल को शामिल करना पर्याप्त है styles। देखें github.com/angular/angular-cli/blob/master/docs/documentation/...

— 0x2D9A3

2

अद्यतन: कोणीय 6.0.0 के साथ फ़ाइल नाम बदल दिया जाता है।।-Clular.json से कोणीय.जॉन

— मनोज नेगी

123

यदि आप SASS का उपयोग कर रहे हैं, तो आप इसे npm के माध्यम से स्थापित कर सकते हैं

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बुनियादी ढांचे के साथ खिलवाड़ करने से बचें । ;)

— FDCastel
स्रोत

यह सबसे अच्छा समाधान imo है। एक के बाद एक आकर्षण की तरह काम करता है ng build && ng serve -w। यह आसान है और कोणीय शैली-फोंट को बदलने की तुलना में scss बिल्ड स्टाइल + फोंट को सुरक्षित रखने के लिए सुरक्षित है;)

— सोयावूड

33

सबसे बढ़िया उत्तर। मामूली सुधार: ~इसके बजाय का उपयोग करें ../node_modules/, जैसे@import '~font-awesome/scss/font-awesome.scss';

— m4js7er

5

angular4 और scss के साथ मेरे लिए काम नहीं कर रहा। मैं सीएसएस देख सकता हूं लेकिन आइकन नहीं

— अनिरुद्ध दास

मुझे Angular4

— Francesco

2

.cssआयात से उपयोग करें ~font-awesome/css/font-awesome.min.cssऔर यह angular4 / cli के लिए ठीक काम करता है (डिफ़ॉल्ट फ़ॉंट-फॉन्ट-पथ)

— टिम

67

शीर्ष उत्तर थोड़ा पुराना है और थोड़ा आसान तरीका है।

npm के माध्यम से स्थापित करें

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

का उपयोग ~कर sass में देखो कर देगाnode_module । सापेक्ष पथ के साथ इस तरह से करना बेहतर है। कारण यह है कि यदि आप npm पर एक घटक अपलोड करते हैं, और आप घटक scss के अंदर फ़ॉन्ट-भयानक आयात करते हैं तो यह ~ के साथ ठीक से काम करेगा और उस सापेक्ष पथ के साथ नहीं जो उस बिंदु पर गलत होगा।

यह विधि किसी भी npm मॉड्यूल के लिए काम करती है जिसमें css होता है। यह scss के लिए भी काम करता है। हालांकि अगर आप अपनी शैलियों में सीएसएस आयात कर रहे हैं। तो यह काम नहीं करेगा (और शायद इसके विपरीत)। यहाँ क्यों है

— CED
स्रोत

आपके चरणों का पालन करने के बाद भी वही त्रुटि हो रही है।

— इंद्र २५ ind

लोड करने में असमर्थ .ttf, woff और woff2 फाइलें

— indra257

मैं cli 1.0 का उपयोग कर रहा हूँ। बस दोहरी जांच करने के लिए, मैंने एक नमूना एप्लिकेशन बनाया और बस फ़ॉन्ट-भयानक लोड किया और एप्लिकेशन को तैनात किया। अभी भी वह त्रुटि हो रही है।

— इंद्र

@ indra257 मुझे $ fa-font-path को जोड़ना पड़ा: "../node_modules/font-awesome/fonts"; कार्य करने के लिए उपरोक्त निर्देशों के लिए

— शैलियों में।

मैं अपनी परियोजना में style.scss फ़ाइल नहीं है। क्या मुझे style.scss फ़ाइल को जोड़ने के बाद किसी अन्य चरण का पालन करना है।

— इंद्र

51

कोणीय परियोजनाओं में Font-Awesome का उपयोग करने के लिए 3 भाग हैं

स्थापना
स्टाइलिंग (CSS / SCSS)
कोणीय में उपयोग

स्थापना

NPM से इंस्टॉल करें और अपने पैकेज में सहेजें। Json

npm install --save font-awesome

स्टाइलिंग अगर सीएसएस का उपयोग कर

अपनी शैली में डालें

@import '~font-awesome/css/font-awesome.css';

स्टाइलिंग यदि SCSS का उपयोग कर

अपनी शैली में डालें। एसएमएस

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

— muttonUp
स्रोत

1

क्या आपको फॉन्ट-भयानक को बंडल करने में कोई समस्या है। मुझे लगता है कि जब हम क्ली का उपयोग करते हैं तो मुख्य मुद्दा बंडलिंग होता है। tff, woff, woff2 फाइलें बंडल नहीं हो रही हैं।

— इंद्र

मैंने सिर्फ एक नमूना एप्लिकेशन बनाया और आपके चरणों का पालन किया। एनजी बिल्ड का उपयोग करके ऐप को बंडल किया। कंसोल में मैं अभी भी woff और woff2 फ़ाइलों को लोड करने में असमर्थ देख रहा हूँ

— indra257

1

यह सही है। यह एनजी सर्व के साथ पूरी तरह से ठीक काम करता है। एनजी बिल्ड के साथ, यह ठीक काम करता है, लेकिन कंसोल दिखाता है कि यह कुछ woff, woff2 फ़ाइलों को लोड करने में असमर्थ है।

— 1825 बजे indra257

मुझे वही समस्या नहीं दिख रही है, इसलिए मुझे उम्मीद है कि आपकी बिल्ड / कॉन्फिग फाइलों में कुछ गड़बड़ है। मेरा सुझाव है कि आप अपनी समस्या को एक परीक्षण मामले के साथ दोहराएं और इसके साथ एक नया प्रश्न बनाएं।

— मटनअप

मैंने कोणीय-क्ली और जोड़ा फ़ॉन्ट-कमाल का उपयोग करके एक खाली ऐप बनाया। आप मुझे कौन सी फाइलें चेक करना चाहते हैं ..

— indra257

26

UPDATE फ़रवरी 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>

मूल ANSWER:

विकल्प 1:

आप कोणीय-फ़ॉन्ट-भयानक npm मॉड्यूल का उपयोग कर सकते हैं

npm install --save font-awesome angular-font-awesome

मॉड्यूल आयात करें:

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

यदि आप कोणीय सीएलआई का उपयोग कर रहे हैं, तो फ़ॉन्ट-भयानक CSS को कोणीय-cli.json के अंदर शैलियों में जोड़ें

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

नोट: यदि SCSS प्रीप्रोसेसर का उपयोग कर रहे हैं तो बस scss के लिए css बदल दें

उदाहरण का उपयोग करें:

<fa name="cog" animation="spin"></fa>

ऑप्टोइन 2:

वहाँ एक है आधिकारिक कहानी है कि अभी

फ़ॉन्ट-भयानक लाइब्रेरी स्थापित करें और निर्भरता को इसमें जोड़ें package.json

npm install --save font-awesome

CSS का उपयोग करना

अपने ऐप में फ़ॉन्ट विस्मयकारी CSS आइकन जोड़ने के लिए ...

// 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: // localhost: 4200 पर नेविगेट करें ।

सत्यापित करने के लिए फ़ॉन्ट विस्मयकारी रूप से सही ढंग से सेट किया गया है, src/app/app.component.htmlनिम्न में परिवर्तन करें ...

<h1>
  {{title}} <i class="fa fa-check"></i>
</h1>

इस फ़ाइल को सहेजने के बाद, एप्लिकेशन शीर्षक के बगल में फ़ॉन्ट विस्मयकारी आइकन देखने के लिए ब्राउज़र पर वापस लौटें।

साथ ही एक संबंधित प्रश्न है कि कोणीय सीएलआई फ़ॉन्ट-भयानक फ़ॉन्ट फ़ाइलों को डिफॉल्ट रूट के रूप में डिफॉल्ट कोणीय क्ली के रूप में रूट में फोंट को आउटपुट करता है dist, जो कि एक मुद्दा नहीं है।

— kuncevic.dev
स्रोत

विकल्प 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में डॉक्स में समान नहीं है , अगर कुछ स्पष्ट नहीं है तो माफी मांगता है।

— उपयोगकर्ता ६३२32१६

1

@ User632716 ओके ने सिर्फ लापता पैकेज को npm स्थापित कमांड में जोड़ा।

— कुंसविक.देव

1

बहुत बहुत धन्यवाद ... मैं कोणीय 9 + फ़ॉन्ट भयानक खोज रहा था। 1 फरवरी को बर्बाद करने के बाद UPDATE Feb 2020 सबसे ज्यादा मददगार है।

— तेजश्री

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)

— shusson
स्रोत

1

ऐसा लगता है कि यह आयात करने की कोशिश कर रहा है, लेकिन एक त्रुटि हो रही है zone.js:101 - GET http://localhost:4200/node_modules/font-awesome/css/font-awesome.css 404 (Not Found) ... फ़ाइल वास्तव में मौजूद है, लेकिन ऐसा लगता है कि localhost:4200इस फ़ोल्डर की जड़ से नहीं चल रहा है ... फॉन्ट- localhost:4200रूट को रूट फ़ोल्डर में कैसे पैकेज किया जाए ...

— microchip78

भी मैं का उपयोग कर रहा हूँ angular-cli@1.0.0-beta.11-webpack.2और शैली फ़ाइल विन्यास में angular-cli.jsonकाम नहीं कर रहा है ...

— microchip78

1

हम्म कि अजीब है, शायद करने के लिए उन्नयन 1.0.0-beta.11-webpack.8?

— 22:14

13

सोचा था कि मैं अपने संकल्प में इसे फेंक दूंगा क्योंकि फ़ॉन्ट-कमाल अब उनके प्रलेखन के अनुसार अलग तरह से स्थापित है।

npm install --save-dev @fortawesome/fontawesome-free

यह अब क्यों है क्योंकि यह मुझे बच जाता है, लेकिन मुझे लगता है कि मैं पुराने फॉन्ट-भयानक पर वापस गिरने के बजाय सबसे हाल के संस्करण के साथ रहना चाहूंगा।

फिर मैंने इसे अपने scss में इम्पोर्ट किया

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

उम्मीद है की यह मदद करेगा

— nabel
स्रोत

5

काम के ऊपर कई निर्देश, मैं उन लोगों को देखने का सुझाव देता हूं। हालांकि, कुछ ध्यान दें:

उपयोग करने से  काम नहीं चला के बाद स्थापना और यहां नमूना आइकन भी फ़ॉन्ट से क्लिपबोर्ड पिछले सप्ताह के भीतर बहुत बढ़िया पर प्रतिलिपि बनाई गई अपने प्रोजेक्ट (नया अभ्यास परियोजना केवल एक सप्ताह पुरानी) में।

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

— मॅकेना
स्रोत

4

यहाँ कई अच्छे उत्तर हैं। लेकिन अगर आप उन सभी को आज़माते हैं और फिर भी फॉन्टवॉच आइकॉन के बजाय स्क्वायर मिलते हैं, तो अपने सीएसएस नियमों की जांच करें। मेरे मामले में मेरे पास निम्नलिखित नियम थे:

* {
  font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}

और यह फॉन्टवॉएड फॉन्ट को ओवरराइड करता है। मेरी समस्या हल *करने के लिए बस चयनकर्ता की जगह body:

body {
  font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}

— वाणिज्यिक आत्महत्या
स्रोत

बहुत बहुत धन्यवाद कि यह मेरे लिए दिया अब मुझे यह पता लगाना है कि शरीर के चयनकर्ता में इसे करने के बाद से काम करने वाले फोंट कैसे प्राप्त करें, यह मेरे लिए काम नहीं करता है

— 16:24 पर jgerstle

@jgerstle, bodyकार्य में फ़ॉन्ट निर्दिष्ट करना, सुनिश्चित करें कि आप फ़ॉन्ट को कहीं और से ओवरराइड नहीं करते हैं, हो सकता है कि आप इसे ओवरराइड कर रहे हों h*या pटैग कर रहे हों जैसा कि हम आमतौर पर करते हैं।

— वाणिज्यिक आत्महत्या

हां कुछ ऐसा लगता है कि यह ओवरराइड कर रहा है, लेकिन मुझे नहीं लगता कि यह मेरा अपना कोड है, मुझे लगता है कि यह क्रोम चूक हो सकती है, हालांकि यह अजीब है क्योंकि मैंने इसे सेट किया है! महत्वपूर्ण है और यह अभी भी ओवरराइड हो रहा है। मुझे इसमें और देखना पड़ेगा।

— १

मैं इसे का उपयोग कर मिल गया: नहीं (.fa) एक ही * चयनकर्ता रखने के लिए, लेकिन फ़ॉन्ट-भयानक का उपयोग करके कुछ भी लक्ष्य नहीं करना चाहिए

— jststle

4

कोणीय 6 के लिए,

प्रथम npm install font-awesome --save

जोड़े node_modules/font-awesome/css/font-awesome.cssको angular.json ।

याद रखें कि किसी भी डॉट को सामने न जोड़ें node_modules/।

— अल्फ मो
स्रोत

2

जब मैं ऐसा करता हूं तो मैं छवियों के लिए सिर्फ चौकों के साथ समाप्त होता हूं।

— गार्गॉयल

यहाँ भी, आपने वर्गों को कैसे हटाया? @ गर्गॉयल

— अंगुलिमाल

4

इस पोस्ट में बताया गया है कि फॉन्टव्यू 5 को एंगुलर 6 (कोणीय 5 और पिछले वर्जन में कैसे इंटीग्रेट किया जाएगा) भी काम करेगा, लेकिन फिर आपको मेरी राइटिंग एडजस्ट करनी होगी)

विकल्प 1: सीएसएस-फाइलें जोड़ें

प्रो: हर आइकन शामिल किया जाएगा

कॉन्ट्रा: हर आइकन को शामिल किया जाएगा (बड़ा ऐप साइज क्योंकि सभी फोंट शामिल हैं)

निम्नलिखित पैकेज जोड़ें:

npm install @fortawesome/fontawesome-free-webfonts

बाद में अपने angular.json में निम्न पंक्तियाँ जोड़ें:

"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: कोणीय पैकेज

प्रो: छोटे अनुप्रयोग का आकार

कॉन्ट्रा: आपको प्रत्येक आइकन को शामिल करना होगा जिसे आप अलग से उपयोग करना चाहते हैं

FontAwesome 5 कोणीय पैकेज का उपयोग करें:

npm install @fortawesome/angular-fontawesome

आइकन जोड़ने के लिए बस उनके प्रलेखन का पालन करें। वे svg-icons का उपयोग करते हैं, इसलिए आपको केवल svgs / icons जोड़ने होंगे, आप वास्तव में उपयोग करते हैं।

— पॉल
स्रोत

ध्यान दें कि आपके रास्ते @fortawesome से शुरू होते हैं। 'FORT' शब्द पर ध्यान दें, न कि 'FONT' मेरा इंस्टॉल भी यही कर रहा है। किसी को पता है कि इस के साथ क्या है?

— हेलजेट 19

कोई बात नहीं, जाहिरा तौर पर उनके पास कुछ नाम बदलने वाली संरचना है। इस

— गीथूब

@ अचिन्तले क्या काम नहीं कर रहे हैं? मैंने

— पॉल

3

कुछ प्रयोग के बाद मैं निम्नलिखित काम पाने में कामयाब रहा:

Npm के साथ स्थापित करें:
```
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">

कुंजी को फ़ॉन्ट फ़ाइल प्रकारों को कोणीय-cli-build.js फ़ाइल में शामिल करने के लिए थी

। + (सीएसएस | css.map | otf | EOT | svg | ttf | WOFF | woff2)

— Nik
स्रोत

1

बस एक सिर ऊपर angular-cli-build.jsनवीनतम

— वेबपैक

इसके अलावा, विक्रेता Angpm- वर्तमान करंट-सीएलआई कोड में नहीं पाया जाता है । एलोन के स्वीकृत उत्तर को देखकर, मुझे लगता है कि यह पुराना है?

— अर्जन

1

@ अर्जन हां, यह जवाब पुराना है ... यह प्री वेबपैक सीएलआई के लिए था। एलोन का उत्तर स्वीकृत उत्तर है

— निक

3

स्वीकृत उत्तर पुराना है।

कोणीय 9 और फॉन्टव्यू 5 के लिए

FontAwesome स्थापित करें

npm स्थापित करें @ fortawesome / fontawesome-free --save
शैलियों के तहत इसे कोणीय.जसन पर पंजीकृत करें

"Node_modules/@fortawesome/fontawesome-free/css/all.min.css"
अपने आवेदन पर इसका इस्तेमाल करें

— रॉन माइकल
स्रोत

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 फॉन्ट फ़ोल्डर को देव एसेट्स फ़ोल्डर में कॉपी कर रहा है।
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इसलिए है क्योंकि मेरे webpack.config में output.path को सेट किया गया है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 त्रुटि मुद्दे को प्राप्त करने के लिए पाया है

— briosheje
स्रोत

2

Https://github.com/AngularClass/angular-starter से शुरू होकर , विभिन्न कॉन्फ़िगरेशन संयोजन का बहुत परीक्षण करने के बाद, यहाँ मैंने इसे AoT के साथ काम करने के लिए किया।

जैसा कि पहले ही कई बार कहा गया है, मेरे में app.component.scss:

$fa-font-path: "~font-awesome/fonts" !default;
@import "~font-awesome/scss/font-awesome";

फिर webpack.config.js (वास्तव में webpack.commong.js स्टार्टर पैक में):

प्लगइन्स अनुभाग में:

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

— user3582315
स्रोत

2

मैंने AngularCLI 6.0.3 और मटीरियल डिज़ाइन के साथ FontAwesome 5.2.0 का नवीनतम संस्करण प्राप्त करने की कोशिश में कई घंटे बर्बाद कर दिए। मैंने FontAwesome वेबसाइट से npm इंस्टॉलेशन निर्देशों का पालन किया

उनके नवीनतम डॉक्स आपको निम्नलिखित का उपयोग करके स्थापित करने का निर्देश देते हैं:

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>

— Helzgate
स्रोत

2

फ़ॉन्ट विस्मयकारी आप scalableवेक्टर प्रतीक देता है जो तुरंत अनुकूलित किया जा सकता है-आकार, रंग, ड्रॉप छाया, और कुछ भी जो शक्ति के साथ किया जा सकता है CSS।

एक नया प्रोजेक्ट बनाएं और प्रोजेक्ट में नेविगेट करें।

ng new navaApp
cd navaApp

फ़ॉन्ट-भयानक लाइब्रेरी स्थापित करें और निर्भरता को इसमें जोड़ें package.json।

npm install --save font-awesome

CSS का उपयोग करना

अपने ऐप में फ़ॉन्ट विस्मयकारी CSS आइकन जोड़ने के लिए ...

// 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.jsonstyles.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

आप कोणीय फ़ॉन्ट विस्मयकारी पैकेज का उपयोग कर सकते हैं

npm install --save फ़ॉन्ट-भयानक कोणीय-फ़ॉन्ट-भयानक

और फिर अपने मॉड्यूल में आयात करें:

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

और कोणीय-क्ली फ़ाइल में शैली आयात करें:

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

npm पुस्तकालय में पैकेज के बारे में अधिक जानकारी देखें:

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

और फिर इसे इस तरह उपयोग करें:

— Shmulik
स्रोत

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

Fontawesome के लिए 5.x + सबसे सरल तरीका निम्नलिखित होगा,

npm पैकेज का उपयोग कर स्थापित करें: 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

LESS (SCSS नहीं) और कोणीय 2.4.0 और मानक वेबपैक (कोणीय CLI नहीं) का उपयोग करते हुए, निम्नलिखित ने मेरे लिए काम किया:

npm install --save font-awesome

और (मेरे app.component.less में):

@import "~font-awesome/less/font-awesome.less";

और निश्चित रूप से आपको इस स्पष्ट और अत्यधिक सहज स्निपेट की आवश्यकता हो सकती है (webpack.conf में मॉड्यूल. लोडर्स में)

        {
            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)"

और regexp उन svg-Reference (संस्करण विनिर्देश के साथ या बिना) से मेल खाता है। आपके वेबपैक सेटअप के आधार पर आपको इसकी आवश्यकता नहीं हो सकती है या आपको कुछ और की आवश्यकता हो सकती है।

— dpnmn
स्रोत

1

इसे अपने पैकेज में जोड़ें। "devDependencies" फ़ॉन्ट-भयानक के रूप में: "संस्करण संख्या"

कमांड प्रॉम्प्ट टाइप करें npm कमांड पर जाएं जिसे आपने कॉन्फ़िगर किया था।

— user1349544
स्रोत

आप अपनी 'निर्भरता' में फ़ॉन्ट-भयानक जोड़ना चाहते हैं, 'देव-निर्भरता' नहीं, क्योंकि आपको अपने अंतिम निर्माण में इसकी आवश्यकता होगी। इसके अलावा ऊपर दिए गए निर्देशों का जवाब नहीं है कि जब आप पैकेज में जोड़े जाते हैं तो कोणीय परियोजना इसे कैसे उठाएगी।

— निक

1

मैं फ़ॉन्ट विस्मयकारी 5+ का उपयोग करना चाहता था और अधिकांश उत्तर पुराने संस्करणों पर केंद्रित थे

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

मैं सिर्फ अपनी शैलियों में 5 फ़ॉन्ट फ़ॉन्ट cdn आयात किया है। बस इस मामले में यह किसी को जवाब में मदद करता है मुझे जल्दी से जोड़ा :-)

Style.css में कोड

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

— फेरडी तोलेनार
स्रोत

मैंने यह कोशिश की। स्थानीय में अच्छा काम करता है, लेकिन जब मैंने इसे बनाने की कोशिश की, तो आइकन गायब हो गए।

— पीयूष चौधरी

1

यदि किसी कारणवश आप पैकेज थ्रो एनपीएम नहीं कर सकते हैं। आप हमेशा index.html संपादित कर सकते हैं और सिर में फ़ॉन्ट भयानक CSS जोड़ सकते हैं। और फिर सिर्फ प्रोजेक्ट में इसका इस्तेमाल किया।

— सेमिर होडज़िक
स्रोत

1

Webpack2 उपयोग के लिए:

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

के बजाय file-loader?name=/assets/fonts/[name].[ext]

— aristotll
स्रोत

1

का उपयोग कर के लिए कोणीय 9 ng:

ng add @fortawesome/angular-fontawesome@0.6.x

अधिक जानकारी के लिए यहां देखें

— एम फूआट नौरोलू
स्रोत

1

अब Angular CLI पर fontAwesome स्थापित करने के कुछ तरीके हैं:

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

— आर्चिल लबादे
स्रोत

Angular 2 + CLI प्रोजेक्ट में फ़ॉन्ट-भयानक कैसे जोड़ें

विकल्प 1:

ऑप्टोइन 2: