Cách thêm font-awesome vào dự án Angular 2 + CLI


269

Tôi đang sử dụng Angular 2+ và Angular CLI.

Làm cách nào để thêm phông chữ tuyệt vời vào dự án của tôi?


Tôi có cùng một vấn đề. Giống như các tệp bị CLI bỏ qua và không được sao chép khi ở chế độ dev. Điều đó nói rằng, tập tin có trong / dist dir, khi quá trình xây dựng được thực hiện.
Thibs

Tôi không hiểu, tại sao chúng ta cần thêm font-awesome qua npm, chúng ta không thể liên kết với cdn tuyệt vời? Tôi đang thiếu gì?
Rosdi Kasim

4
@RosdiKasim bạn có thể liên kết đến mẫu cdn tệp chỉ mục của bạn. Có những trường hợp bạn không muốn mặc dù. Dự án công ty có thể không cho phép các nguồn bên ngoài; CDN có thể đi xuống; Cập nhật CLI có thể cần cập nhật tệp index.html để bạn phải đảm bảo rằng nó không ghi đè lên các liên kết hiện tại của bạn; font-awesome có thể là một phụ thuộc cho một npm lib khác; bạn muốn khóa phông chữ tuyệt vời cho một phiên bản nhất định; quá trình xây dựng của bạn có thể phụ thuộc vào nó ... (và cứ thế, bạn hiểu ý) Cuối cùng, tùy theo cách bạn muốn đưa nó vào.
Nik

Ok cảm ơn ... có vẻ như tôi không thiếu nhiều ... Tôi chỉ muốn chắc chắn rằng tôi hiểu những ưu và nhược điểm ... chúc mừng.
Rosdi Kasim

Xem thêm tài liệu chính thức để thêm JS hoặc CSS: angular.io/guide/ từ
Guillaume Husta

Câu trả lời:


468

Sau bản phát hành cuối cùng của Angular 2.0, cấu trúc của dự án Angular2 CLI đã được thay đổi - bạn không cần bất kỳ tệp nhà cung cấp nào, không có system.js - chỉ có gói web. Bạn cũng vậy:

  1. npm install font-awesome --save

  2. Trong angular-cli.jsontệp định vị styles[]mảng và thêm thư mục tham chiếu phông chữ tuyệt vời ở đây, như dưới đây:

    "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!?
          ],
          ...
      }
      ]
    ],
    

    Trong các phiên bản gần đây hơn của Angular, sử dụng angular.jsontệp thay thế mà không có ../. Ví dụ, sử dụng "node_modules/font-awesome/css/font-awesome.css".

  3. Đặt một số biểu tượng phông chữ tuyệt vời trong bất kỳ tệp html nào bạn muốn:

    <i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i>
  4. Dừng ứng dụng Ctrl+ csau đó chạy lại ứng dụng bằngng serve trình theo dõi chỉ dành cho thư mục src và angular-cli.json không được quan sát để thay đổi.

  5. Thưởng thức các biểu tượng tuyệt vời của bạn!

3
Bạn có thể giải thích những gì addonskhông? Tôi thấy nó được ghi là "Cấu hình dành riêng cho các addons bên thứ ba đã cài đặt." , nhưng tôi không thể tìm thấy bất kỳ xử lý nào trong mã Angular-CLI .
Arjan

1
Thật không may @Arjan & @bjorkblom - tôi không thể tìm thấy bất kỳ tài liệu nào liên quan đến việc addonsnộp đơn này ... Điều này đã được tôi chú ý một thời gian rồi .. Tôi sẽ cập nhật câu trả lời của mình khi tôi tìm thấy thứ gì đó.
AIon

3
@Rosdi Kasim Jan - bạn có thể làm điều đó - nhưng trong các ứng dụng lớn hơn thường bạn không sử dụng cdns. Đầu tiên bởi vì ai đó có thể hack chúng và thỏa hiệp ứng dụng của bạn một cách gián tiếp. Thứ hai bởi vì nó không chỉ là phông chữ tuyệt vời - bạn cần các thư viện bên ngoài khác như bootstrap, thư viện dnd, v.v. - nếu bạn có yêu cầu http riêng - cho một cdn - đối với mỗi thư viện, đó là hiệu suất kém. Thay vào đó, những gì bạn làm là tải xuống bằng npm - và gói tất cả mã của bạn trong một tệp bằng cách sử dụng webpack hoặc một cái gì đó, giảm thiểu và làm xấu đi điều đó - và đó là cách bạn có thể chạy ứng dụng của mình trên thiết bị di động - nơi tài nguyên thấp.
AIon

12
Lưu ý: addonstài sản không còn được sử dụng. Nó đủ để bao gồm các font-awesome.csstập tin dưới styles. Xem github.com/angular/angular-cli/blob/master/docs/documentation/ Lời
0x2D9A3

2
Cập nhật: Với Angular 6.0.0, tên tệp được thay đổi từ .angular-cli.json thành angular.json
Manoj Negi

123

Nếu bạn đang sử dụng SASS, bạn chỉ có thể cài đặt nó qua npm

npm install font-awesome --save

và nhập nó trong của bạn /src/styles.scssvới:

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

Mẹo: Bất cứ khi nào có thể, tránh gây rối với angular-clicơ sở hạ tầng. ;)


Đó là giải pháp tốt nhất imo. Hoạt động như một bùa mê sau a ng build && ng serve -w. Thật dễ dàng và an toàn hơn khi để scss xây dựng kiểu + phông chữ hơn là cố gắng thay đổi angular-cli infra;)
Soywod

33
Câu trả lời tốt nhất. Cải thiện nhỏ: sử dụng ~thay vì ../node_modules/, ví dụ@import '~font-awesome/scss/font-awesome.scss';
m4js7er

5
không làm việc cho tôi với angular4 và scss. Tôi có thể thấy css nhưng không phải là biểu tượng
Aniruddha Das

Tôi có cùng một vấn đề trên Angular4
Francesco

2
Sử dụng .cssnhập từ ~font-awesome/css/font-awesome.min.cssvà nó hoạt động tốt (mặc định fa-font-path) cho angular4 / cli
Tim

67

Câu trả lời hàng đầu là một chút lỗi thời và có một cách dễ dàng hơn một chút.

  1. cài đặt qua npm

    npm install font-awesome --save

  2. trong của bạn style.css:

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

    hoặc trong style.scss:

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

    Chỉnh sửa: như đã lưu ý trong các nhận xét, dòng cho phông chữ phải được thay đổi trên các phiên bản mới hơn thành$fa-font-path: "../../../node_modules/font-awesome/fonts";

sử dụng ~sẽ làm cho sass nhìn vàonode_module . Tốt hơn là làm theo cách này hơn là với đường dẫn tương đối. Lý do là nếu bạn tải lên một thành phần vào npm và bạn nhập phông chữ tuyệt vời bên trong scss thành phần thì nó sẽ hoạt động đúng với ~ và không phải với đường dẫn tương đối sẽ sai ở điểm đó.

Phương pháp này hoạt động cho bất kỳ mô-đun npm có chứa css. Nó hoạt động cho scss là tốt. Tuy nhiên nếu bạn đang nhập css vào style.scss thì nó sẽ không hoạt động (và có thể ngược lại). Đây là lý do tại sao


Vẫn nhận được lỗi tương tự sau khi làm theo các bước của bạn.
indra257

Không thể tải các tệp .ttf, woff và woff2
indra257

Tôi đang sử dụng cli 1.0. Chỉ cần kiểm tra lại, tôi đã tạo một ứng dụng mẫu và chỉ cần tải phông chữ tuyệt vời và triển khai ứng dụng. vẫn nhận được lỗi đó.
indra257

@ indra257 Tôi đã phải thêm $ fa-font-path: "../node_modules/font-awclaw/fonts"; trong style.scss để hướng dẫn ở trên hoạt động
Todilo

Tôi không có tệp style.scss trong dự án của mình. Tôi có phải làm theo bất kỳ bước nào khác sau khi thêm tệp Styles.scss không.
indra257

51

Có 3 phần để sử dụng Font-Awesome trong các dự án góc

  1. Cài đặt
  2. Tạo kiểu (CSS / SCSS)
  3. Sử dụng trong Angular

Cài đặt

Cài đặt từ NPM và lưu vào gói.json của bạn

npm install --save font-awesome

Tạo kiểu Nếu sử dụng CSS

Chèn vào style.css của bạn

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

Tạo kiểu Nếu sử dụng SCSS

Chèn vào style.scss của bạn

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

Sử dụng với Angular 2.4+ 4+ đơn giản

<i class="fa fa-area-chart"></i>

Sử dụng với vật liệu góc

Trong app.module.ts của bạn sửa đổi hàm tạo để sử dụng MdIconRegistry

export class AppModule {
  constructor(matIconRegistry: MatIconRegistry) {
    matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
  }
}

và thêm MatIconModulevào @NgModulenhập khẩu của bạn

@NgModule({
  imports: [
    MatIconModule,
    ....
  ],
  declarations: ....

}


Bây giờ trong bất kỳ tệp mẫu nào bạn có thể làm

<mat-icon fontSet="fontawesome" fontIcon="fa-area-chart"></mat-icon>

1
Bạn có bất kỳ vấn đề với việc đóng gói phông chữ tuyệt vời. Tôi nghĩ vấn đề chính là bó khi chúng tôi sử dụng Cli. Các tệp tff, woff, woff2 không được đóng gói.
indra257

Tôi chỉ cần tạo một ứng dụng mẫu và làm theo các bước của bạn. Gói ứng dụng bằng cách sử dụng ng build. Trong bảng điều khiển, tôi vẫn thấy Không thể tải các tệp woff và woff2
indra257

1
Đúng rồi. Nó hoạt động hoàn toàn tốt với ng phục vụ. Với ng build, nó hoạt động tốt, nhưng giao diện điều khiển cho thấy nó không thể tải một số tệp woff, woff2.
indra257

Tôi không thấy vấn đề tương tự, vì vậy tôi hy vọng có điều gì đó không ổn với các tệp build / config của bạn. Tôi đề nghị bạn sao chép vấn đề của bạn với một trường hợp thử nghiệm và tạo một câu hỏi mới với nó.
muttonUp

Tôi đã tạo một ứng dụng trống bằng cách sử dụng angular-cli và thêm phông chữ tuyệt vời. Những tập tin nào bạn muốn tôi kiểm tra ..
indra257

26

CẬP NHẬT Tháng 2 năm 2020: gói
fortawgie hiện hỗ trợ ng addnhưng nó chỉ khả dụng cho góc 9 :

ng add @fortawesome/angular-fontawesome

CẬP NHẬT ngày 8 tháng 10 năm 2019:

Bạn có thể sử dụng gói mới https://www.npmjs.com/package/@fortawclaw/angular-fontawemme

npm install @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

Thêm FontAwesomeModulevào nhập khẩu trong 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 { }

Buộc biểu tượng vào thuộc tính trong thành phần của bạn 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;
}

Sử dụng biểu tượng trong mẫu src/app/app.component.html:

<fa-icon [icon]="faCoffee"></fa-icon>

TRẢ LỜI GỐC:

Lựa chọn 1:

Bạn có thể sử dụng mô-đun npm angular-font-awesome

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

Nhập mô-đun:

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

Nếu bạn đang sử dụng Angular CLI, hãy thêm CSS tuyệt vời vào các kiểu bên trong angular-cli.json

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

LƯU Ý: Nếu sử dụng bộ xử lý trước SCSS, chỉ cần thay đổi css cho scss

Ví dụ sử dụng:

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

Optoin 2:

Có một câu chuyện chính thức cho bây giờ

Cài đặt thư viện tuyệt vời về phông chữ và thêm phụ thuộc vào package.json

npm install --save font-awesome

Sử dụng CSS

Để thêm các biểu tượng CSS Awesome CSS vào ứng dụng của bạn ...

// in .angular-cli.json

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

Sử dụng SASS

Tạo một tập tin trống _variables.scsstrongsrc/ .

Thêm vào đây _variables.scss :

$fa-font-path : '../node_modules/font-awesome/fonts'; Trong styles.scssthêm những điều sau đây:

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

Kiểm tra

Chạy ng phục vụ để chạy ứng dụng của bạn trong chế độ phát triển và điều hướng đến http: // localhost: 4200 .

Để xác minh Font Awesome đã được thiết lập chính xác, hãy thay đổi src/app/app.component.htmlthành ...

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

Sau khi lưu tệp này, quay lại trình duyệt để xem biểu tượng Phông chữ tuyệt vời bên cạnh tiêu đề ứng dụng.

Ngoài ra, có một câu hỏi liên quan Angular CLI xuất ra các tệp phông chữ tuyệt vời, gốc của disti vì mặc định cli góc sẽ xuất các phông chữ vào distgốc, đây không phải là vấn đề.


Khi sử dụng tùy chọn 1, hãy xóa ../từ phía trước"../node_modules/font-awesome/css/font-awesome.css"
Alf Moh

TẠI SAO tôi nên sử dụng gói góc mới? Có vẻ như nhiều hơn một PITA để nhập chúng riêng lẻ.
MDave

1
Tôi có nghĩa là npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-iconstrong câu trả lời của bạn không bằng npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/angular-fontawesometrong các tài liệu, xin lỗi nếu tôi thiếu một cái gì đó rõ ràng.
Người dùng632716

1
@ User632716 OK chỉ cần thêm gói bị thiếu vào lệnh cài đặt npm.
kuncevic.dev

1
Cảm ơn rất nhiều ... Tôi đã tìm kiếm phông chữ Angular 9 + tuyệt vời. CẬP NHẬT Tháng 2 năm 2020 là điều hữu ích nhất sau khi lãng phí 1 ngày.
Tejashree

15

Với Angular2RC5 và angular-cli 1.0.0-beta.11-webpack.8bạn có thể đạt được điều này với nhập khẩu css.

Chỉ cần cài đặt phông chữ tuyệt vời:

npm install font-awesome --save

và sau đó nhập phông chữ tuyệt vời vào một trong các tệp kiểu được định cấu hình của bạn:

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

(tập tin kiểu được cấu hình trong angular-cli.json)


1
Có vẻ như nó đang cố nhập nhưng gặp lỗi zone.js:101 - GET http://localhost:4200/node_modules/font-awesome/css/font-awesome.css 404 (Not Found) ... tập tin thực sự tồn tại nhưng có vẻ như localhost:4200không chạy từ thư mục gốc này ... Cách gói font-awesome vào localhost:4200thư m��c gốc ...
microchip78

Ngoài ra, tôi đang sử dụng [email protected]và cấu hình tệp kiểu angular-cli.jsonkhông hoạt động ...
microchip78

1
hmm đó là lạ, có thể nâng cấp lên 1.0.0-beta.11-webpack.8?
shusson

13

Tôi nghĩ rằng tôi sẽ giải quyết vấn đề này vì font-awesome hiện được cài đặt khác nhau theo tài liệu của họ.

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

Tại sao nó là fortawgie bây giờ thoát khỏi tôi nhưng nghĩ rằng tôi sẽ gắn bó với phiên bản mới nhất thay vì quay lại với phông chữ cũ - tuyệt vời.

Sau đó, tôi nhập nó vào scss của tôi

$fa-font-path: "../node_modules/@fortawesome/fontawesome-free/webfonts";
@import "[email protected]/fontawesome-free/scss/fontawesome";
@import "[email protected]/fontawesome-free/scss/brands";
@import "[email protected]/fontawesome-free/scss/regular";
@import "[email protected]/fontawesome-free/scss/solid";
@import "[email protected]/fontawesome-free/scss/v4-shims";

Hi vọng điêu nay co ich


5

Nhiều hướng dẫn trên công việc, tôi đề nghị nhìn vào những. Tuy nhiên, một điều cần lưu ý:

Sử dụng <i class="fas fa-coffee"></i> không hiệu quả trong dự án của tôi (dự án thực hành mới chỉ một tuần tuổi) sau khi cài đặt và biểu tượng mẫu ở đây cũng được sao chép vào bảng tạm từ Font Awesome trong tuần qua.

Điều này <i class="fa fa-coffee"></i> không hoạt động . Nếu sau khi cài đặt Font Awesome trên dự án của bạn, nó vẫn chưa hoạt động, tôi khuyên bạn nên kiểm tra lớp trên biểu tượng của bạn để xóa 's' để xem nó có hoạt động không.


4

Có rất nhiều câu trả lời tốt ở đây. Nhưng nếu bạn đã thử tất cả chúng và vẫn nhận được các hình vuông thay vì các biểu tượng fontawgie, hãy kiểm tra quy tắc css của bạn. Trong trường hợp của tôi, tôi đã có quy tắc sau:

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

Và nó ghi đè phông chữ fontawgie. Chỉ cần thay thế *bộ chọn để bodygiải quyết vấn đề của tôi:

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

Cảm ơn bạn rất nhiều vì đã làm điều đó cho tôi bây giờ tôi phải tìm ra cách để các phông chữ hoạt động kể từ khi thực hiện nó trong bộ chọn cơ thể không hoạt động với tôi
jgerstle

@jgerstle, chỉ định phông chữ bodysẽ hoạt động, chắc chắn rằng bạn không ghi đè phông chữ ở nơi khác, có thể là bạn ghi đè lên nó h*hoặc pcác thẻ như chúng ta thường làm.
Tự tử thương mại

Ya một cái gì đó dường như đang ghi đè lên nó nhưng tôi không nghĩ đó là mã riêng của mình Tôi nghĩ rằng nó có thể chỉ là chrome mặc định nó thật kỳ lạ bởi vì tôi đã đặt nó thành! Quan trọng và nó dường như vẫn bị ghi đè. Tôi sẽ phải xem xét thêm về nó.
jgerstle

Tôi đã nhận được nó bằng cách sử dụng: không (.fa) để giữ cùng một bộ chọn *, nhưng không nhắm mục tiêu bất cứ điều gì bằng cách sử dụng phông chữ tuyệt vời
jgerstle

4

Đối với góc 6,

Đầu tiên npm install font-awesome --save

Thêm node_modules/font-awesome/css/font-awesome.cssvào angular.json .

Hãy nhớ không thêm bất kỳ dấu chấm nào ở phía trước node_modules/.


2
Tôi kết thúc với chỉ hình vuông cho hình ảnh khi tôi làm điều này.
Gargoyle

Tương tự ở đây, làm thế nào bạn loại bỏ các hình vuông? @Gargoyle
AngularM

4

Bài đăng này mô tả cách tích hợp Fontawgie 5 vào Angular 6 (Angular 5 và các phiên bản trước cũng sẽ hoạt động, nhưng sau đó bạn phải điều chỉnh các bài viết của tôi)

Tùy chọn 1: Thêm tệp css

Pro: Mọi biểu tượng sẽ được bao gồm

Contra: Mọi biểu tượng sẽ được bao gồm (kích thước ứng dụng lớn hơn vì tất cả các phông chữ được bao gồm)

Thêm gói sau:

npm install @fortawesome/fontawesome-free-webfonts

Sau đó, thêm các dòng sau vào angular.json của bạn:

"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"
],
...    
}

Cách 2: Gói góc

Pro: Kích thước ứng dụng nhỏ hơn

Contra: Bạn phải bao gồm mọi biểu tượng bạn muốn sử dụng riêng biệt

Sử dụng gói FontAwgie 5 Angular:

npm install @fortawesome/angular-fontawesome

Chỉ cần làm theo tài liệu của họ để thêm các biểu tượng. Họ sử dụng các biểu tượng svg, vì vậy bạn chỉ cần thêm các biểu tượng / biểu tượng, bạn thực sự sử dụng.


Lưu ý đường dẫn của bạn bắt đầu với @fortawgie. Lưu ý từ 'FORT', không phải 'FONT' Cài đặt của tôi cũng đang làm điều này. Bất cứ ai biết những gì đang xảy ra với điều này?
Helzgate

Không sao, rõ ràng họ có một số đổi tên cấu trúc đang diễn ra. Xem bài đăng trên Github này
Helzgate

@Aniketkale cái gì không hoạt động? Tôi đã trình bày hai lựa chọn
Paul

3

Sau một số thử nghiệm, tôi đã có được công việc sau:

  1. Cài đặt với npm:

    npm install font-awesome --save
    
  2. thêm vào tệp angular-cli-build.js :

    vendorNpmFiles : [
        font-awesome/**/*.+(css|css.map|otf|eot|svg|ttf|woff|woff2)',
    ]
    
  3. thêm vào index.html

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

Chìa khóa là bao gồm các loại tệp phông chữ trong tệp angular-cli-build.js

. + (css | css.map | otf | eot | svg | ttf | woff | woff2)


1
chỉ cần một người đứng đầu là không có angular-cli-build.jstrong nhánh webpack mới nhất
shusson

Ngoài ra, nhà cung cấpNpmFiles không được tìm thấy trong mã Angular-CLI hiện tại . Nhìn thấy câu trả lời được chấp nhận của Alon, tôi đoán đây là lỗi thời?
Arjan

1
@Arjan yep, câu trả lời này đã lỗi thời ... đây là cho CLI gói web trước. Câu trả lời của Alon là câu trả lời được chấp nhận
Nik

3

Câu trả lời được chấp nhận là lỗi thời.

Dành cho góc 9 và Fontawgie 5

  1. Cài đặt FontAwgie

    npm cài đặt @ fortawgie / fontawgie-free --save

  2. Đăng ký nó trên angular.json theo phong cách

    "node_modules/@fortawgie/fontawgie-free/css/all.min.css"

  3. Sử dụng nó trên ứng dụng của bạn


2

Chỉnh sửa: Tôi đang sử dụng góc ^ 4.0.0 và Electron ^ 1.4.3

Nếu bạn gặp sự cố với ElectronJS hoặc tương tự và có lỗi 404, cách khắc phục có thể là khắc phục sự cố của bạn webpack.config.js, bằng cách thêm (và bằng cách giả sử rằng bạn đã cài đặt mô-đun nút tuyệt vời qua npm hoặc trong tệp pack.json) :

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

Lưu ý rằng cấu hình webpack tôi đang sử dụng có src/app/distđầu ra và, trong dist, một assetsthư mục được tạo bởi 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'
},

Về cơ bản, những gì hiện đang xảy ra là:

  • Webpack đang sao chép thư mục phông chữ vào thư mục dev property.
  • Webpack đang sao chép thư mục tài sản dev vào distthư mục tài sản

Bây giờ, khi quá trình xây dựng kết thúc, ứng dụng sẽ cần tìm .scsstệp và thư mục chứa các biểu tượng, giải quyết chúng đúng cách. Để giải quyết chúng, tôi đã sử dụng điều này trong cấu hình webpack của mình:

// support for fonts
{
    test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
    loader: 'file-loader?name=dist/[name]-[hash].[ext]'
},

Cuối cùng, trong .scsstệp, tôi đang nhập phông chữ .scss tuyệt vời và xác định đường dẫn của phông chữ, một lần nữa , dist/assets/font-awesome/fonts. Con đường làdist bởi vì trong webpack.config, output.path được đặt làhelpers.root('src/app/dist');

Vì vậy, trong app.scss:

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

Lưu ý rằng, theo cách này, nó sẽ xác định đường dẫn phông chữ (được sử dụng sau trong tệp .scss) và nhập tệp .scss bằng cách sử dụng ~font-awesomeđể giải quyết đường dẫn tuyệt vời về phông chữ node_modules.

Điều này khá khó khăn, nhưng đó là cách duy nhất tôi tìm thấy để khắc phục sự cố lỗi 404 với Electron.js


2

Bắt đầu từ https://github.com/AngularClass/angular-starter , sau khi đã thử nghiệm rất nhiều kết hợp cấu hình khác nhau, đây là những gì tôi đã làm để làm cho nó hoạt động với AoT.

Như đã nói nhiều lần, trong tôi app.component.scss:

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

Sau đó, trong webpack.config.js (thực sự là webpack.commong.js trong gói khởi động):

Trong phần bổ trợ:

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

Trong phần quy tắc:

,
{
    test: /\.(eot|woff2?|svg|ttf)([\?]?.*)$/,
    use: 'file-loader?name=/assets/fonts/[name].[ext]'
}

2

Tôi đã lãng phí vài giờ để cố gắng để phiên bản mới nhất của FontAwgie 5.2.0 hoạt động với AngularCLI 6.0.3 và Thiết kế Vật liệu. Tôi đã làm theo hướng dẫn cài đặt npm trên trang web FontAwgie

Tài liệu mới nhất của họ hướng dẫn bạn cài đặt bằng cách sử dụng như sau:

npm install @fortawesome/fontawesome-free

Sau khi lãng phí vài giờ, cuối cùng tôi đã gỡ cài đặt nó và cài đặt phông chữ tuyệt vời bằng cách sử dụng lệnh sau (cài đặt này FontAw đũa v4.7.0):

npm install font-awesome --save

Bây giờ nó hoạt động tốt bằng cách sử dụng:

$fa-font-path: "~font-awesome/fonts" !default;
@import "~font-awesome/scss/font-awesome.scss";
<mat-icon fontSet="fontawesome" fontIcon="fa-android"></mat-icon>

2

Font Awesome cung cấp cho bạn scalablecác biểu tượng vector có thể được tùy chỉnh ngay lập tức kích thước, màu sắc, bóng đổ và bất cứ thứ gì có thể được thực hiện với sức mạnh của CSS.

Tạo một dự án mới và điều hướng vào dự án.

ng new navaApp
cd navaApp

Cài đặt thư viện font-awesome và thêm phụ thuộc vào package.json.

npm install --save font-awesome

Sử dụng CSS

Để thêm các biểu tượng CSS Awesome CSS vào ứng dụng của bạn ...

// in angular.json
"build": {
"options": {
"styles": [
  "../node_modules/font-awesome/css/font-awesome.css",
  "src/styles.css"
],
 }
}

Sử dụng SASS

Tạo dự án mới với SASS:

ng new cli-app --style=scss

Để sử dụng với dự án hiện có với CSS:

Đổi tên src/styles.cssthành src/styles.scss Thay đổi angular.jsonđể tìm kiếm styles.scssthay vì css:

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

Hãy chắc chắn để thay đổi styles.cssthành styles.scss.

Tạo một tập tin trống _variables.scsstrongsrc/ .

Thêm vào như sau_variables.scss :

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

Trong styles.scssthêm những điều sau đây:

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

Đó là một câu hỏi hay. Đó luôn là câu hỏi đối với tôi
Seyed Ali Mahmoody

2

Bạn có thể sử dụng gói Angular Font Awesome

cài đặt npm --save font-awesome angular-font-awesome

và sau đó nhập vào mô-đun của bạn:

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

và nhập kiểu trong tệp angular-cli:

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

xem thêm chi tiết về gói trong thư viện npm:

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

và sau đó sử dụng nó như thế này:

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


2

Để sử dụng Font Awesome 5 trong dự án Angular của bạn, hãy chèn mã bên dưới vào tệp src / index.html.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

Chúc may mắn!


2

Đối với fontawgie 5.x + cách đơn giản nhất sẽ là như sau,

cài đặt bằng gói npm: npm install --save @fortawesome/fontawesome-free

Trong styles.scsstập tin của bạn bao gồm:

$fa-font-path: "[email protected]/fontawesome-free/webfonts";
@import '[email protected]/fontawesome-free/scss/fontawesome';
@import '[email protected]/fontawesome-free/scss/solid';
@import '[email protected]/fontawesome-free/scss/regular';

Lưu ý: nếu bạn có _variables.scsstệp thì nên bao gồm cả $fa-font-pathbên trong tệp và không có trong styles.scsstệp.


1

Sử dụng LESS (không phải SCSS) và Angular 2.4.0 và Webpack tiêu chuẩn (không phải Angular CLI, những điều sau đây có hiệu quả với tôi:

npm install --save font-awesome

và (trong app.component.less của tôi):

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

và tất nhiên bạn có thể cần đoạn mã rõ ràng và trực quan cao này (trong module.loaders trong webpack.conf)

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

Trình tải có sẵn để sửa các lỗi webpack

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

và biểu thức chính quy phù hợp với các tham chiếu svg (có hoặc không có đặc tả phiên bản). Tùy thuộc vào thiết lập gói web của bạn, bạn có thể không cần nó hoặc bạn có thể cần một cái gì đó khác.


1

Thêm nó vào gói.json của bạn dưới dạng "devDependencies" font-awesome: "số phiên bản"

Đi tới Command Prompt gõ lệnh npm mà bạn đã cấu hình.


Bạn sẽ muốn thêm phông chữ tuyệt vời vào 'phụ thuộc' của bạn, chứ không phải 'phụ thuộc dev' như bạn sẽ cần nó trong bản dựng cuối cùng của mình. Ngoài ra, các hướng dẫn ở trên không trả lời làm thế nào dự án Angular sẽ chọn nó sau khi chúng được thêm vào tệp pack.json của bạn.
Nik

1

Tôi muốn sử dụng Font Awesome 5+ và hầu hết các câu trả lời tập trung vào các phiên bản cũ hơn

Đối với Font Awesome 5+ mới, dự án góc cạnh chưa được phát hành, vì vậy nếu bạn muốn sử dụng các ví dụ được đề cập trên trang web tuyệt vời về phông chữ, bạn cần sử dụng một công việc xung quanh. (đặc biệt là fas, lớp xa thay vì lớp fa)

Tôi vừa nhập cdn vào Font Awesome 5 trong style.css của mình. Chỉ cần thêm điều này trong trường hợp nó giúp ai đó tìm thấy câu trả lời nhanh hơn tôi đã làm :-)

Mã trong Style.css

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

Tôi đã thử điều này. Hoạt động tốt ở địa phương, nhưng khi tôi cố gắng xây dựng nó, các biểu tượng bị mất.
Piyush Choudhary

1

Nếu vì lý do nào đó bạn không thể cài đặt gói ném npm. Bạn luôn có thể chỉnh sửa index.html và thêm phông chữ CSS tuyệt vời vào đầu. Và sau đó chỉ sử dụng nó trong dự án.


1

Đối với webpack2 sử dụng:

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

thay vì file-loader?name=/assets/fonts/[name].[ext]



1

Bây giờ có vài cách để cài đặt fontAwgie trên 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

Tham khảo tại đây: https://github.com/FortAwgie/angular-fontawgie

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.