Używam Angular 2+ i Angular CLI.

Jak dodać czcionkę niesamowitą do mojego projektu?

Po ostatecznej wersji Angular 2.0 struktura projektu Angular2 CLI została zmieniona - nie potrzebujesz żadnych plików dostawcy, żadnych plików system.js - tylko webpack. Więc robisz:

1. npm install font-awesome --save

2. W angular-cli.jsonpliku zlokalizuj styles[]tablicę i dodaj katalog odnośników z niesamowitymi czcionkami, jak poniżej:

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

   W nowszych wersjach Angulara użyj angular.jsonzamiast tego pliku bez ../. Na przykład użyj "node_modules/font-awesome/css/font-awesome.css".

3. Umieść kilka niesamowitych czcionek ikon w dowolnym pliku HTML:

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

4. Zatrzymaj aplikację Ctrl+, ca następnie uruchom ponownie aplikację, ng serveponieważ obserwatorzy są tylko dla folderu src, a zmiany nie są obserwowane w pliku angular-cli.json.

5. Ciesz się niesamowitymi ikonami!

Jeśli używasz SASS, możesz po prostu zainstalować go za pomocą npm

npm install font-awesome --save

i zaimportuj go /src/styles.scssdo:

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

Wskazówka: w miarę możliwości unikaj bałaganu w angular-cliinfrastrukturze. ;)

Najlepsza odpowiedź jest nieco przestarzała i istnieje nieco łatwiejszy sposób.

1. zainstaluj przez npm

   npm install font-awesome --save

2. w twoim style.css:

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

   lub w style.scss:

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

   Edycja: jak zauważono w komentarzach, wiersz czcionek należy zmienić w nowszych wersjach na$fa-font-path: "../../../node_modules/font-awesome/fonts";

użycie ~spowoduje, że Sass zajrzynode_module . Lepiej to zrobić w ten sposób niż ścieżką względną. Powodem jest to, że jeśli prześlesz komponent na npm i zaimportujesz niesamowite czcionki do komponentu scss, to będzie on działał poprawnie z ~, a nie ze ścieżką względną, która w tym momencie będzie niepoprawna.

Ta metoda działa dla każdego modułu npm, który zawiera css. Działa również w przypadku scss. Jednak jeśli importujesz css do swojego styles.scss, to nie zadziała (i może na odwrót). Oto dlaczego

Korzystanie z Font-Awesome w Angular Projects składa się z 3 części

1. Instalacja
2. Stylizacja (CSS / SCSS)
3. Zastosowanie w Angular

Instalacja

Zainstaluj z NPM i zapisz w pliku package.json

npm install --save font-awesome

Stylizacja W przypadku korzystania z CSS

Wstaw do swojego style.css

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

Stylizacja W przypadku korzystania z SCSS

Wstaw do swojego style.scss

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

Zastosowanie z prostym Angular 2.4+ 4+

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

Zastosowanie z materiałem kątowym

W pliku app.module.ts zmodyfikuj konstruktor, aby użyć MdIconRegistry

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

i dodaj MatIconModuledo @NgModuleimportu

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

}

Teraz w dowolnym pliku szablonu, który możesz teraz zrobić

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

AKTUALIZACJA Luty 2020:
fortawesome pakiet obsługuje teraz, ng addale jest dostępny tylko dla kątowej 9 :

ng add @fortawesome/angular-fontawesome

AKTUALIZACJA 8 października 2019:

Możesz użyć nowego pakietu https://www.npmjs.com/package/@fortawesome/angular-fontawesome

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

Dodaj FontAwesomeModuledo importu w 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 { }

Przywiąż ikonę do właściwości w swoim komponencie 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;
}

Użyj ikony w szablonie src/app/app.component.html:

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

ORYGINALNA ODPOWIEDŹ:

Opcja 1:

Możesz użyć modułu npm angular -font-awesome

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

Zaimportuj moduł:

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

Jeśli używasz Angular CLI, dodaj niesamowity czcionek CSS do stylów wewnątrz angular-cli.json

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

UWAGA: Jeśli używasz preprocesora SCSS, po prostu zmień css dla scss

Przykład użycia:

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

Optoin 2:

Teraz jest na to oficjalna historia

Zainstaluj niesamowitą czcionkę bibliotekę i dodaj zależność do package.json

npm install --save font-awesome

Korzystanie z CSS

Aby dodać ikony Font Awesome CSS do swojej aplikacji ...

// in .angular-cli.json

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

Korzystanie z SASS

Utwórz pusty plik _variables.scssw src/.

Dodaj następujące elementy _variables.scss:

$fa-font-path : '../node_modules/font-awesome/fonts'; Na styles.scssdodatek, co następuje:

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

Test

Uruchom ng służy do uruchamiania aplikacji w trybie programowania i przejdź do http: // localhost: 4200 .

Aby sprawdzić, czy czcionka Awesome została poprawnie skonfigurowana, zmień src/app/app.component.htmlna następujące ...

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

Po zapisaniu tego pliku wróć do przeglądarki, aby zobaczyć ikonę Font Awesome obok tytułu aplikacji.

Istnieje również podobne pytanie: Angular CLI wyświetla pliki czcionek niesamowite w folderze dist root, ponieważ domyślnie angular cli wysyła czcionki do distkatalogu głównego, co zresztą wcale nie jest problemem.

Z Angular2RC5 angular-cli 1.0.0-beta.11-webpack.8możesz to osiągnąć za pomocą importu css.

Wystarczy zainstalować niesamowitą czcionkę:

npm install font-awesome --save

a następnie zaimportuj niesamowite czcionki w jednym ze skonfigurowanych plików stylów:

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

(pliki stylów są skonfigurowane w angular-cli.json)

Pomyślałem, że wrzucę do tego moją rozdzielczość, ponieważ czcionka jest teraz instalowana inaczej, zgodnie z ich dokumentacją.

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

Dlaczego to jest cudowne, teraz mi ucieka, ale pomyślałem, że będę trzymać się najnowszej wersji, zamiast wracać do starej niesamowitej czcionki.

Następnie zaimportowałem go do mojego 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";

Mam nadzieję że to pomoże

Wiele instrukcji powyżej działa, sugeruję, aby na nie spojrzeć. Należy jednak zauważyć:

Korzystanie <i class="fas fa-coffee"></i> nie działało w moim projekcie (nowy projekt treningowy sprzed zaledwie tygodnia), a przykładowa ikona tutaj została również skopiowana do schowka z Font Awesome w ciągu ostatniego tygodnia.

To <i class="fa fa-coffee"></i> działa . Jeśli po zainstalowaniu Font Awesome w twoim projekcie nie działa jeszcze, sugeruję sprawdzenie klasy na ikonie, aby usunąć „s”, aby zobaczyć, czy to działa.

Tutaj jest wiele dobrych odpowiedzi. Ale jeśli wypróbowałeś je wszystkie i nadal otrzymujesz kwadraty zamiast niesamowitych ikon, sprawdź swoje zasady css. W moim przypadku miałem następującą zasadę:

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

I zastępuje niesamowite czcionki. Wystarczy wymienić *selektor, aby bodyrozwiązać mój problem:

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

W przypadku Angular 6

Pierwszy npm install font-awesome --save

Dodaj node_modules/font-awesome/css/font-awesome.cssdo angular.json .

Pamiętaj, aby nie dodawać żadnych kropek przed node_modules/.

W tym poście opisano, jak zintegrować Fontawesome 5 z Angular 6 (Angular 5 i poprzednie wersje również będą działać, ale wtedy musisz dostosować moje pisma)

Opcja 1: Dodaj pliki css

Pro: każda ikona zostanie dołączona

Contra: każda ikona zostanie dołączona (większy rozmiar aplikacji, ponieważ wszystkie czcionki są uwzględnione)

Dodaj następujący pakiet:

npm install @fortawesome/fontawesome-free-webfonts

Następnie dodaj następujące wiersze do pliku 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"
],
...    
}

Opcja 2: Pakiet kątowy

Pro: mniejszy rozmiar aplikacji

Contra: Musisz dołączyć każdą ikonę, której chcesz używać osobno

Użyj pakietu FontAwesome 5 Angular:

npm install @fortawesome/angular-fontawesome

Postępuj zgodnie z ich dokumentacją, aby dodać ikony. Używają ikon svg, więc musisz tylko dodać ikony svg /, których naprawdę używasz.

Po kilku eksperymentach udało mi się uzyskać następujące działanie:

1. Zainstaluj za pomocą npm:

   npm install font-awesome --save
   

2. dodaj do pliku angular-cli-build.js :

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

3. dodaj do index.html

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

Kluczem było włączenie typów plików czcionek do pliku angular-cli-build.js

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

Zaakceptowana odpowiedź jest nieaktualna.

Dla Angular 9 i Fontawesome 5

1. Zainstaluj FontAwesome

   npm install @ fortawesome / fontawesome-free --save

2. Zarejestruj go na angular.json w obszarze Style

   „node_modules/@fortawesome/fontawesome-free/css/all.min.css”

3. Użyj go w swojej aplikacji

Edycja: używam kątowej ^ 4.0.0 i elektronu ^ 1.4.3

Jeśli masz problemy z ElectronJS lub podobnym i masz coś w rodzaju błędu 404, możliwe jest obejście tego problemu webpack.config.js, dodając (i zakładając, że masz niesamowity pod względem czcionek moduł węzła zainstalowany przez npm lub w pliku package.json) :

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

Zauważ, że konfiguracja webpacka, której używam, ma src/app/distjako dane wyjściowe, aw assetsfolderze webpack tworzy folder:

// 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'
},

Zasadniczo zatem dzieje się:

• Webpack kopiuje folder czcionek do folderu zasobów deweloperskich.
• Webpack kopiuje folder zasobów deweloperskich do folderu distzasobów

Teraz, gdy proces kompilacji zostanie zakończony, aplikacja będzie musiała poszukać .scsspliku i folderu zawierającego ikony, rozwiązując je poprawnie. Aby je rozwiązać, użyłem tego w mojej konfiguracji pakietu sieciowego:

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

Wreszcie, w .scsspliku importuję niesamowitą czcionkę .scss i definiuję ścieżkę czcionek, czyli znowu dist/assets/font-awesome/fonts. Ścieżka jest taka, distponieważ w moim pliku webpack.config wartość parametru output.path jest ustawiona nahelpers.root('src/app/dist');

Tak więc w app.scss:

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

Zauważ, że w ten sposób zdefiniuje ścieżkę czcionki (używaną później w pliku .scss) i zaimportuje plik .scss, ~font-awesomeaby rozwiązać ścieżkę niesamowitą dla czcionek node_modules.

Jest to dość trudne, ale to jedyny sposób, w jaki udało mi się rozwiązać problem błędu 404 w Electron.js

Począwszy od https://github.com/AngularClass/angular-starter , po przetestowaniu wielu różnych kombinacji konfiguracji, oto, co zrobiłem, aby działało z AoT.

Jak już wielokrotnie mówiłem, w moim app.component.scss:

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

Następnie w webpack.config.js (w rzeczywistości webpack.commong.js w pakiecie startowym):

W sekcji wtyczek:

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

W sekcji zasad:

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

Zmarnowałem kilka godzin, próbując uzyskać najnowszą wersję FontAwesome 5.2.0 współpracującą z AngularCLI 6.0.3 i Material Design. Postępowałem zgodnie z instrukcjami instalacji npm ze strony FontAwesome

Najnowsze dokumenty zalecają instalację przy użyciu następujących czynności:

npm install @fortawesome/fontawesome-free

Po marnowaniu kilku godzin w końcu odinstalowałem go i zainstalowałem niesamowitą czcionkę za pomocą następującego polecenia (to instaluje FontAwesome v4.7.0):

npm install font-awesome --save

Teraz działa dobrze, używając:

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

Czcionka Awesome zapewnia scalableikony wektorowe, które można błyskawicznie dostosować - rozmiar, kolor, cień i wszystko, co można zrobić za pomocą siły CSS.

Utwórz nowy projekt i przejdź do niego.

ng new navaApp
cd navaApp

Zainstaluj niesamowitą czcionkę bibliotekę i dodaj zależność do package.json.

npm install --save font-awesome

Korzystanie z CSS

Aby dodać ikony Font Awesome CSS do swojej aplikacji ...

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

Korzystanie z SASS

Utwórz nowy projekt za pomocą SASS:

ng new cli-app --style=scss

Do użycia z istniejącym projektem z CSS:

Zmień nazwę src/styles.cssna src/styles.scss Zmień, angular.jsonaby szukać styles.scsszamiast css:

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

Pamiętaj, aby zmienić styles.cssna styles.scss.

Utwórz pusty plik _variables.scssw src/.

Dodaj następujące elementy _variables.scss:

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

Na styles.scssdodatek, co następuje:

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

Możesz użyć pakietu Angular Font Awesome

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

a następnie zaimportuj do swojego modułu:

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

i zaimportuj styl do pliku kątowego-cli:

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

zobacz więcej szczegółów na temat pakietu w bibliotece npm:

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

a następnie użyj go w następujący sposób:

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

Aby użyć Font Awesome 5 w projekcie Angular, wstaw poniższy kod do pliku src / index.html.

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

Powodzenia!

W przypadku fontawesome 5.x + najprostszym sposobem byłoby:

zainstaluj za pomocą pakietu npm: npm install --save @fortawesome/fontawesome-free

W twoim styles.scsspliku są:

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

Uwaga: jeśli masz _variables.scssplik, bardziej odpowiednie jest umieszczenie go w $fa-font-pathśrodku, a nie w styles.scsspliku.

Używając LESS (nie SCSS) i Angular 2.4.0 oraz standardowego pakietu Webpack (nie Angular CLI, działało dla mnie:

npm install --save font-awesome

i (w mojej app.component.less):

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

i oczywiście może być potrzebny ten oczywisty i bardzo intuicyjny fragment kodu (w module.loaders w webpack.conf)

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

Moduł ładujący służy do naprawy tego rodzaju błędów pakietu

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

a wyrażenie regularne pasuje do tych referencji svg (ze specyfikacją wersji lub bez). W zależności od konfiguracji pakietu internetowego możesz go nie potrzebować lub może potrzebujesz czegoś innego.

Dodaj go w pliku package.json jako „devDependencies”. Czcionka-awesome: „numer wersji”

Przejdź do wiersza polecenia, wpisz polecenie npm, które skonfigurowałeś.

Chciałem użyć Font Awesome 5+ i większość odpowiedzi skupia się na starszych wersjach

W przypadku nowej Font Awesome 5+ projekt kątowy nie został jeszcze wydany, więc jeśli chcesz skorzystać z przykładów wymienionych na stronie internetowej z niesamowitą czcionką, musisz skorzystać z obejścia. (szczególnie fas, dalekie klasy zamiast fa)

Właśnie zaimportowałem cdn do Font Awesome 5 w moim styles.css. Właśnie to dodałem na wypadek, gdyby pomogło komuś znaleźć odpowiedź szybciej niż ja :-)

Kod w Style.css

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

Jeśli z jakiegoś powodu nie możesz zainstalować pakietu wyrzuć npm. Zawsze możesz edytować index.html i dodawać niesamowite czcionki CSS w głowie. A potem użyłem go w projekcie.

W przypadku webpack2 użyj:

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

zamiast file-loader?name=/assets/fonts/[name].[ext]

W przypadku Angulara 9 przy użyciu ng:

ng add @fortawesome/[email protected]

Zajrzyj tutaj, aby uzyskać więcej informacji

Teraz istnieje kilka sposobów instalacji fontAwesome na 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

Odnośnik tutaj: https://github.com/FortAwesome/angular-fontawesome