ฉันกำลังใช้ Angular 2+ และ Angular CLI

ฉันจะเพิ่มแบบอักษรที่ยอดเยี่ยมให้กับโครงการของฉันได้อย่างไร

หลังจากการเปิดตัว Angular 2.0 สุดท้ายโครงสร้างของโครงการ Angular2 CLI ได้รับการเปลี่ยนแปลง - คุณไม่ต้องการไฟล์ผู้ขายใด ๆ ไม่มี system.js - webpack เท่านั้น ดังนั้นคุณทำ:

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. วางไอคอนตัวอักษรที่น่ากลัวในไฟล์ html ที่คุณต้องการ:

   <i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i>

4. หยุดแอปพลิเคชันCtrl+ cจากนั้นเรียกใช้แอปอีกครั้งโดยใช้ng serveเพราะตัวเฝ้าใช้สำหรับโฟลเดอร์ src เท่านั้นและไม่พบการเปลี่ยนแปลง angular-cli.json

5. เพลิดเพลินกับไอคอนที่ยอดเยี่ยมของคุณ!

หากคุณใช้ 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โครงสร้างพื้นฐาน ;)

คำตอบยอดนิยมนั้นค่อนข้างล้าสมัยและมีวิธีที่ง่ายกว่าเล็กน้อย

1. ติดตั้งผ่าน npm

   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มันจะดีกว่าที่จะทำแบบนี้มากกว่ากับเส้นทางญาติ เหตุผลก็คือถ้าคุณอัปโหลดองค์ประกอบในเวลา 23.00 น. และคุณนำเข้าแบบอักษรที่ยอดเยี่ยมภายในคอมโพเนนต์ scss แล้วมันจะทำงานได้อย่างถูกต้องด้วย ~ และไม่ได้อยู่ในเส้นทางสัมพัทธ์ที่จะผิดที่จุดนั้น

วิธีนี้ใช้ได้กับโมดูล npm ใด ๆ ที่มี css มันใช้งานได้สำหรับ scss เช่นกัน อย่างไรก็ตามหากคุณกำลังนำเข้า css ไปยัง styles.scss ของคุณจะไม่ทำงาน (และอาจกลับกัน) นี่คือเหตุผล

มี 3 ส่วนในการใช้ Font-Awesome ในโครงการแองกูลาร์

1. การติดตั้ง
2. จัดแต่งทรงผม (CSS / SCSS)
3. การใช้งานในเชิงมุม

การติดตั้ง

ติดตั้งจาก NPM และบันทึกลงใน package.json ของคุณ

npm install --save font-awesome

จัดแต่งทรงผม หากใช้ CSS

แทรกลงใน style.css ของคุณ

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

จัดแต่งทรงผม หากใช้ SCSS

แทรกลงใน style.scss ของคุณ

$fa-font-path: "../node_modules/font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

การใช้งานกับ Angular ธรรมดา 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>

UPDATE กุมภาพันธ์ 2020:
fortawesomeแพคเกจในขณะนี้สนับสนุนng addแต่ก็สามารถใช้ได้เฉพาะสำหรับเชิงมุม 9 :

ng add @fortawesome/angular-fontawesome

อัพเดท 8 ต.ค. 2562:

คุณสามารถใช้แพ็คเกจใหม่ได้ที่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 เชิงมุมตัวอักษรที่ยอดเยี่ยม

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

นำเข้าโมดูล:

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

หากคุณกำลังใช้ Angular CLI ให้เพิ่ม CSS แบบอักษรสุดยอดเพื่อสไตล์ภายใน angular-cli.json

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

หมายเหตุ: หากใช้ตัวประมวลผลล่วงหน้า SCSS เพียงแค่เปลี่ยน css สำหรับ scss

ตัวอย่างการใช้:

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

การเลือก 2:

ตอนนี้มีเรื่องราวอย่างเป็นทางการแล้ว

ติดตั้งไลบรารี font-Awesome และเพิ่มการอ้างอิงถึง package.json

npm install --save font-awesome

ใช้ CSS

วิธีเพิ่มไอคอน Font Awesome CSS ในแอปของคุณ ...

// in .angular-cli.json

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

ใช้ SASS

สร้างไฟล์ที่ว่างเปล่าใน_variables.scsssrc/

เพิ่มรายการต่อไปนี้ใน_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

หากต้องการตรวจสอบการตั้งค่า Font Awesome อย่างถูกต้องให้เปลี่ยนsrc/app/app.component.htmlดังต่อไปนี้ ...

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

หลังจากบันทึกไฟล์นี้แล้วให้กลับไปที่เบราว์เซอร์เพื่อดูไอคอนตัวอักษรที่ยอดเยี่ยมถัดจากชื่อแอพ

นอกจากนี้ยังมีคำถามที่เกี่ยวข้องกับAngular CLI ที่ส่งออกไฟล์ฟอนต์ - ตัวอักษรที่ยอดเยี่ยมรูตตามค่าเริ่มต้น cli ของแองกูลาร์เอาท์พุทแบบอักษรไปยังdistรูทซึ่งเป็นวิธีที่ไม่เป็นปัญหาเลย

ด้วย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)

คิดว่าฉันจะลงมตินี้เนื่องจากตัวอักษรที่ยอดเยี่ยมติดตั้งแตกต่างกันไปตามเอกสารของพวกเขา

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

หวังว่านี่จะช่วยได้

คำแนะนำหลายอย่างข้างต้นทำงานฉันขอแนะนำให้ดูที่ อย่างไรก็ตามสิ่งที่ควรทราบ:

การใช้<i class="fas fa-coffee"></i> ไม่ทำงานในโครงการของฉัน (โครงการฝึกหัดใหม่อายุเพียงหนึ่งสัปดาห์) หลังการติดตั้งและไอคอนตัวอย่างที่นี่ก็ถูกคัดลอกไปยังคลิปบอร์ดจาก Font Awesome ภายในสัปดาห์ที่ผ่านมา

มัน<i class="fa fa-coffee"></i> ใช้งานได้ หากหลังจากติดตั้ง Font Awesome ในโครงการของคุณแล้วมันยังไม่ทำงานฉันขอแนะนำให้ตรวจสอบคลาสที่ไอคอนของคุณเพื่อลบ 's' เพื่อดูว่าใช้งานได้หรือไม่

มีคำตอบที่ดีมากมายที่นี่ แต่ถ้าคุณลองทั้งหมดและยังคงเป็นสี่เหลี่ยมแทนไอคอน fontawesome ตรวจสอบกฎ CSS ของคุณ ในกรณีของฉันฉันมีกฎต่อไปนี้:

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

และมันแทนที่ฟอนต์ตัวอักษรที่น่ากลัว เพียงแค่เปลี่ยนตัว*เลือกเพื่อbodyแก้ไขปัญหาของฉัน:

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

สำหรับเชิงมุม 6

เป็นครั้งแรก npm install font-awesome --save

เพิ่ม node_modules/font-awesome/css/font-awesome.cssการangular.json

โปรดจำไว้ว่าไม่ได้ที่จะเพิ่มจุดใด ๆ node_modules/ในด้านหน้าของ

โพสต์นี้จะอธิบายถึงวิธีการรวมFontawesome 5เข้ากับAngular 6 (Angular 5 และรุ่นก่อนหน้าจะทำงานได้เช่นกัน แต่คุณต้องปรับการเขียนของฉัน)

ตัวเลือก 1: เพิ่มไฟล์ css

Pro: ไอคอนทุกอันจะรวมอยู่ด้วย

Contra: ทุกไอคอนจะถูกรวมไว้ (ขนาดของแอพที่ใหญ่กว่าเพราะมีแบบอักษรทั้งหมดรวมอยู่ด้วย)

เพิ่มแพ็คเกจต่อไปนี้:

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: แพคเกจเชิงมุม

Pro: ขนาดแอปที่เล็กกว่า

Contra: คุณต้องรวมทุกไอคอนที่คุณต้องการใช้ seperatly

ใช้แพ็คเกจ FontAwesome 5 Angular:

npm install @fortawesome/angular-fontawesome

เพียงทำตามเอกสารประกอบเพื่อเพิ่มไอคอน พวกเขาใช้ svg-icons ดังนั้นคุณเพียงแค่เพิ่ม svgs / ไอคอนที่คุณใช้จริงๆ

หลังจากการทดลองบางอย่างฉันจัดการเพื่อให้ทำงานต่อไปนี้:

1. ติดตั้งด้วย npm:

   npm install font-awesome --save
   

2. เพิ่มในไฟล์angular-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">
   

กุญแจสำคัญคือการรวมประเภทไฟล์ตัวอักษรในไฟล์ angular-cli-build.js

. + (CSS | css.map | OTF | EOT | SVG | TTF | WOFF | woff2)

คำตอบที่ยอมรับนั้นล้าสมัยแล้ว

สำหรับเชิงมุม 9 และ Fontawesome 5

1. ติดตั้ง FontAwesome

   npm install @ fortawesome / fontawesome-free --save

2. ลงทะเบียนใน angular.json ภายใต้รูปแบบ

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

3. ใช้กับแอปพลิเคชันของคุณ

แก้ไข: ฉันใช้ angular ^ 4.0.0 และ Electron ^ 1.4.3

หากคุณมีปัญหากับElectronJSหรือคล้ายคลึงกันและมีข้อผิดพลาด 404 วิธีแก้ไขที่เป็นไปได้คือการเพิ่มของคุณwebpack.config.jsโดยการเพิ่ม (และโดยสมมติว่าคุณมีโมดูลโหนดฟอนต์ที่ยอดเยี่ยมติดตั้งผ่านทาง npm หรือในไฟล์ package.json) :

new CopyWebpackPlugin([
     { from: 'node_modules/font-awesome/fonts', to: 'assets' },
     { from: 'src/assets', to: 'assets' }
]),

โปรดทราบว่าการกำหนดค่า webpack ที่ฉันใช้src/app/distเป็นผลลัพธ์และในระยะทางassetsโฟลเดอร์จะถูกสร้างโดย webpack:

// 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 กำลังคัดลอกโฟลเดอร์แบบอักษรไปยังโฟลเดอร์ dev asset
• Webpack กำลังคัดลอกโฟลเดอร์สินทรัพย์ dev ไปยังdistโฟลเดอร์ทรัพย์สิน

ตอนนี้เมื่อกระบวนการสร้างจะเสร็จสิ้นแอปพลิเคชันจะต้องมองหา.scssไฟล์และโฟลเดอร์ที่มีไอคอนการแก้ไขพวกเขาอย่างถูกต้อง เพื่อแก้ไขปัญหาฉันได้ใช้สิ่งนี้ในการกำหนดค่า webpack ของฉัน:

// 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) และนำเข้าไฟล์. scss ที่ใช้~font-awesomeเพื่อแก้ไขพา ธ แบบอักษร - เท่ห์ในnode_modulesเยี่ยม

นี่เป็นเรื่องที่ค่อนข้างยุ่งยาก แต่เป็นวิธีเดียวที่ฉันพบว่าได้รับปัญหาข้อผิดพลาด 404 กับ Electron.js

เริ่มต้นจาก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]'
}

ฉันเสียเวลาหลายชั่วโมงในการลองใช้ FontAwesome 5.2.0 เวอร์ชันล่าสุดที่ทำงานกับ AngularCLI 6.0.3 และการออกแบบวัสดุ ฉันทำตามคำแนะนำในการติดตั้ง npm จากเว็บไซต์ FontAwesome

เอกสารล่าสุดของพวกเขาแนะนำให้คุณติดตั้งโดยใช้สิ่งต่อไปนี้:

npm install @fortawesome/fontawesome-free

หลังจากเสียเวลาหลายชั่วโมงในที่สุดฉันก็ถอนการติดตั้งและติดตั้ง font Awesome โดยใช้คำสั่งต่อไปนี้ (นี่ติดตั้ง FontAwesome 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.jsonfont-น่ากลัวและเพิ่มขึ้นต่อไป

npm install --save font-awesome

ใช้ CSS

วิธีเพิ่มไอคอน Font Awesome 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 Change angular.jsonเพื่อค้นหาstyles.scssแทนcss:

// in angular.json
"build": {
"options": {
"styles": [
  "src/styles.scss"
],
}
}

ให้แน่ใจว่าจะเปลี่ยนไปstyles.cssstyles.scss

สร้างไฟล์ที่ว่างเปล่าใน_variables.scsssrc/

เพิ่มรายการต่อไปนี้ใน_variables.scss:

$fa-font-path : '../node_modules/font-awesome/fonts';

ในการstyles.scssเพิ่มต่อไปนี้:

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';

คุณสามารถใช้แพ็คเกจ Angular Font Awesome

ติดตั้ง NPM - บันทึกตัวอักษรที่ยอดเยี่ยมเชิงมุมตัวอักษรที่ยอดเยี่ยม

แล้วนำเข้าโมดูลของคุณ:

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

และนำเข้าสไตล์ในไฟล์ angular-cli:

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

ดูรายละเอียดเพิ่มเติมเกี่ยวกับแพ็คเกจในไลบรารี npm:

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

แล้วใช้แบบนี้:

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

หากต้องการใช้ Font Awesome 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">

โชคดี!

สำหรับ 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ไฟล์

การใช้ LESS (ไม่ใช่ SCSS) และ Angular 2.4.0 และ Webpack มาตรฐาน (ไม่ใช่ Angular CLI การทำงานต่อไปนี้สำหรับฉัน:

npm install --save font-awesome

และ (ใน app.component.less ของฉัน):

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

และแน่นอนว่าคุณอาจต้องการตัวอย่างข้อมูลที่ชัดเจนและเข้าใจง่าย (ใน module.loaders ใน webpack.conf)

        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
            loader: 'file?name=graphics/[name].[ext]'
        },

ตัวโหลดอยู่ที่นั่นเพื่อแก้ไขข้อผิดพลาดของ webpack

"Module parse failed: \node_modules\font-awesome\fonts\fontawesome-webfont.svg?v=4.7.0 Unexpected token (1:0)" 

และ regexp ตรงกับการอ้างอิง svg เหล่านั้น (โดยมีหรือไม่มีสเปครุ่น) ขึ้นอยู่กับการตั้งค่า webpack ของคุณคุณอาจไม่ต้องการมันหรือคุณอาจต้องการอย่างอื่น

เพิ่มใน package.json ของคุณเป็น "devDependencies" font-Awesome: "หมายเลขรุ่น"

ไปที่ Command Prompt พิมพ์คำสั่ง npm ที่คุณกำหนดค่า

ฉันต้องการใช้ Font Awesome 5+ และคำตอบส่วนใหญ่มุ่งเน้นไปที่เวอร์ชันเก่ากว่า

สำหรับ Font Awesome 5+ ใหม่โครงการเชิงมุมยังไม่ได้วางจำหน่ายดังนั้นหากคุณต้องการใช้ประโยชน์จากตัวอย่างที่กล่าวถึงในเว็บไซต์สุดยอดเยี่ยมแบบอักษรที่คุณจำเป็นต้องใช้งาน (โดยเฉพาะอย่างยิ่ง fas, ชั้นเรียนไกลแทนของชั้นฟ้า)

ฉันเพิ่งนำเข้า cdn ไปยัง Font Awesome 5 ใน styles.css ของฉัน เพิ่งเพิ่มในกรณีนี้จะช่วยให้ใครบางคนค้นหาคำตอบได้เร็วกว่าที่ฉัน :-)

รหัสใน Style.css

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

ถ้าด้วยเหตุผลบางอย่างคุณไม่สามารถติดตั้งแพ็คเกจได้เลย คุณสามารถแก้ไข index.html และเพิ่ม CSS Awesome font ในหัวได้ตลอดเวลา แล้วใช้มันในโครงการ

สำหรับ 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]

สำหรับ Angular 9 โดยใช้ng:

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

ดูที่นี่สำหรับข้อมูลเพิ่มเติม

ตอนนี้มีวิธีติดตั้ง fontAwesome บน Angular CLI ไม่กี่วิธี:

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