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

npm install font-awesome --save

I zaimportować do swojego /src/styles.scss za pomocą:

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

Wskazówka: Jeśli to możliwe, unikaj bałaganu z infrastrukturą angular-cli. ;)

Najlepsza odpowiedź jest trochę przestarzała i jest 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 Twoim style.scss:

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

   Edit: jak zaznaczono w komentarzach linia dla czcionek musi zostać zmieniona w nowszych wersjach na $fa-font-path: "../../../node_modules/font-awesome/fonts";

Użycie ~ spowoduje, że sass spojrzy na node_module. Lepiej zrobić to w ten sposób niż ze ścieżką względną. Powód jest tak, że jeśli wgrasz komponent na npm i zaimportujesz font-awesome wewnątrz komponentu scss, to będzie on działał poprawnie z~, a nie ze ścieżką względną, która będzie w tym momencie błędna.

Ta metoda działa dla każdego modułu npm zawierającego css. Działa również dla scss. jednakże jeśli importujesz css do swoich stylów.scss to nie zadziała (i może odwrotnie). oto dlaczego

Istnieją 3 części do używania Font-Awesome w projektach Angular

1. instalacja
2. Styling (CSS/SCSS)
3. użycie w kątach

Instalacja

Zainstaluj z NPM i zapisz do swojego pakietu.json

npm install --save font-awesome

Stylizacja Jeśli używasz CSS

Wstaw do swojego stylu.css

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

Stylizacja Jeśli używasz SCSS

Insert into your styl.scss

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

Zastosowanie z prostym kątowym 2.4+ 4+

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

Użycie z materiałem kątowym

W Twojej aplikacji.moduł.ts zmodyfikować konstruktor używać MdIconRegistry

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

I dodać MatIconModule do swojego @NgModule

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

}

Teraz w dowolnym pliku szablonu możesz teraz zrobić

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

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

Wystarczy zainstalować font awesome:

npm install font-awesome --save

A następnie zaimportuj font-awesome w jednym ze skonfigurowanych plików stylów:

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

(Pliki stylów są konfigurowane w angular-cli.json)

Wariant 1:

Możesz użyć angular-font-awesome {[19] } npm module

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

Import modułu:

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

Jeśli używasz Angular CLI, dodaj Font-awesome 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ładowe Użycie:

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

Optoin 2:

Istnieje oficjalna historia na to teraz

Zainstaluj biblioteka font-awesome i dodanie zależności do package.json

npm install --save font-awesome

Korzystanie z CSS

Aby dodać Font Awesome Ikony 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.scss w src/.

Dodaj do _variables.scss:

$fa-font-path : '../node_modules/font-awesome/fonts'; W styles.scss dodać:

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

Test

Uruchom ng serve, aby uruchomić aplikację w trybie develop, i przejdź do http://localhost:4200 .

Aby sprawdzić, czy czcionka Awesome została poprawnie skonfigurowana, Zmień src / app / app.komponent.html do następujących...

<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ż powiązane pytanie Angular Cli wyprowadza Font-awesome Pliki Czcionek dist root Jak domyślnie angular CLI wyprowadza czcionki do dist root, co przy okazji nie jest problemem w wszystkie.

Po kilku eksperymentach udało mi się wykonać następujące czynności:

1. Zainstaluj za pomocą npm:

   npm install font-awesome --save
   

2. Dodaj do angular-CLI-build.js plik:

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

3. Dodaj do indeksu .html

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

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

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

Edit: używam angular ^4.0.0 i Electron ^1.4.3

Jeśli masz problemy z ElectronJS lub podobnym i masz rodzaj błędu 404, możliwym obejściem jest uedit webpack.config.js, dodając (i zakładając, że masz moduł font-awesome node zainstalowany przez npm lub w pakiecie.plik json):

new CopyWebpackPlugin([
     { from: 'node_modules/font-awesome/fonts', to: 'assets' },
     { from: 'src/assets', to: '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'
},

Więc zasadniczo to, co obecnie się dzieje, to:

• Webpack kopiuje folder fonts do folderu dev assets.
Webpack kopiuje folder dev assets do folderu dist assets

Teraz, gdy proces budowania zostanie zakończony, aplikacja będzie musiała poszukać pliku .scss i folderu zawierającego ikony, odpowiednio je rozwiązując. Aby je rozwiązać, użyłem tego w moim Webpack config:

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

Wreszcie w pliku .scss jestem importowanie czcionki-Super .scss i definiowanie ścieżki czcionek, czyli znowu dist/assets/font-awesome/fonts. Ścieżka jest dist ponieważ w moim webpack.Konfiguracja wyjścia.ścieżka jest ustawiona jako helpers.root('src/app/dist');

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żytą później w .plik scss) i zaimportować .plik scss używając ~font-awesome do rozwiązania ścieżki font-awesome w node_modules.

Jest to dość trudne, ale to jedyny sposób, który znalazłem, aby obejść problem z błędem 404 Elektron.js

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

Jak już wiele razy 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łaściwie webpack.commong.js w pakiecie startowym):

W sekcji Wtyczki:

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

W sekcji zasady:

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

Jest tu wiele dobrych odpowiedzi. Ale jeśli wypróbowałeś wszystkie z nich i nadal otrzymujesz kwadraty zamiast FontAwesome ikony, Sprawdź swoje reguły css. W moim przypadku miałem następującą zasadę:

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

I nadpisuje czcionki fontawesome. Po prostu zamiana selektora * na body rozwiązałem mój problem:

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

Dla Kątowej 6,

Pierwszy npm install font-awesome --save

Dodaj node_modules/font-awesome/css/font-awesome.css do kanciaste.json.

Pamiętaj nie aby dodawać kropki przed node_modules/.

Ten post opisuje jak zintegrować Fontawesome 5 z Angular 6 (Angular 5 i poprzednie wersje również będą działać, ale potem trzeba 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ą dołączone)

Dodać następujące opakowanie:

npm install @fortawesome/fontawesome-free-webfonts

Następnie dodaj następujące linie do swojego kanciaste.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żyć oddzielnie

Użyj pakietu FontAwesome 5:

npm install @fortawesome/angular-fontawesome

Po prostu postępuj zgodnie z ich dokumentacją, aby dodać ikony. Używają svg-icons, więc trzeba tylko dodać svgs / icons, naprawdę używać.

Używając LESS (nie SCSS) i Angular 2.4.0 oraz standardowego Webpacka (nie Angular CLI, u mnie zadziałało:

npm install --save font-awesome

I (w mojej aplikacji.komponent.mniej): {]}

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

I oczywiście możesz potrzebować tego oczywistego i wysoce intuicyjnego fragmentu (w module.Ładowarki w webpack.conf)

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

The loader is there to fix webpack errors of the kind

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

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

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

Dla nowej czcionki Awesome 5+ Projekt angular nie został jeszcze wydany, więc jeśli chcesz skorzystać z przykładów wymienionych na stronie font awesome, musisz skorzystać z obejścia. (zwłaszcza klasy FAS, far zamiast klasy fa)

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

Kod W Stylu.css

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

Jeśli z jakiegoś powodu nie możesz zainstalować pakietu throw npm. Zawsze możesz edytować indeks.html i dodaj czcionkę awesome CSS w głowie. A potem po prostu użył go w projekcie.

Do użycia w webpack2:

{
 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]

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

Ich najnowsze dokumenty instruują, aby zainstalować za pomocą następujących instrukcji:

npm install @fortawesome/fontawesome-free

Po zmarnowaniu kilku godzin w końcu go odinstalowałem i zainstalowałem font awesome używając następującego polecenia (to instaluje FontAwesome v4.7.0):

npm install font-awesome --save

Teraz działa dobrze użycie:

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

Dodaj go do swojej paczki.json as "devDependencies" font-awesome: "numer wersji"

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