Jak dodać niesamowite czcionki do projektu Angular 2 + CLI

269

Używam Angular 2+ i Angular CLI.

Jak dodać czcionkę niesamowitą do mojego projektu?

Nik
źródło
Mam ten sam problem. To tak, jakby pliki były ignorowane przez CLI i nie były kopiowane w trybie deweloperskim. To powiedziawszy, plik jest w katalogu / dist, kiedy kompilacja jest zakończona.
Thibs
Nie rozumiem, dlaczego musimy dodawać niesamowite czcionki za pomocą npm, czy nie możemy po prostu połączyć się z niesamowitymi czcionkami CDN? czego mi brakuje?
Rosdi Kasim
4
@RosdiKasim możesz link do cdn z pliku indeksu. Są jednak przypadki, w których nie chciałbyś. Projekty korporacyjne mogą nie zezwalać na źródła zewnętrzne; CDN może spaść; Aktualizacja interfejsu CLI może wymagać aktualizacji pliku index.html, więc musisz upewnić się, że nie zastąpi on twoich bieżących linków; font-awesome może być zależnością dla innej biblioteki npm; chcesz zablokować niesamowite czcionki w określonej wersji; twój proces kompilacji może zależeć od tego ... (i tak dalej, masz pomysł) W końcu, aż do tego, jak chcesz go wprowadzić.
Nik
Ok, dziękuję ... wygląda na to, że niewiele mi brakuje ... Chcę się tylko upewnić, że rozumiem zalety i wady ... na zdrowie.
Rosdi Kasim
Zobacz także oficjalną dokumentację dotyczącą dodawania JS lub CSS: angular.io/guide/…
Guillaume Husta,

Odpowiedzi:

468

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!
AIon
źródło
3
Czy możesz wyjaśnić, co addonsrobi? Widzę, że jest to udokumentowane jako „Konfiguracja zarezerwowana dla zainstalowanych dodatków stron trzecich”. , ale nie mogę znaleźć żadnej obsługi w kodzie Angular-CLI .
Arjan
1
Niestety @Arjan & @bjorkblom - nie mogłem znaleźć żadnych dokumentów dotyczących tego pola addons... To jest już od dłuższego czasu moją uwagę .. Zaktualizuję swoją odpowiedź, gdy coś znajdę.
AI.
3
@Rosdi Kasim Jan - możesz to zrobić - ale w większych aplikacjach na ogół nie używasz cdns. Po pierwsze, ponieważ ktoś może je zhakować i pośrednio narazić twoją aplikację. Po drugie, ponieważ jest nie tylko niesamowity pod względem czcionek - potrzebujesz innych bibliotek zewnętrznych, takich jak bootstrap, biblioteki dnd itp. - jeśli masz oddzielne żądanie HTTP - do cdn - dla każdej z nich, to zła wydajność. Zamiast tego pobierasz za pomocą npm - i łączysz cały swój kod w jednym pliku za pomocą webpacka lub czegoś, zminimalizuj i uglify - i tak możesz uruchomić aplikację na urządzeniu mobilnym - tam, gdzie zasoby są niskie.
AI.
12
Uwaga: ta addonswłaściwość nie jest już używana. Wystarczy dołączyć font-awesome.cssplik pod styles. Zobacz github.com/angular/angular-cli/blob/master/docs/documentation/…
0x2D9A3
2
Aktualizacja: W Angular 6.0.0 nazwa pliku została zmieniona z .angular-cli.json na angular.json
Manoj Negi
123

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. ;)

FDCastel
źródło
To najlepsze rozwiązanie imo. Działa jak urok po ng build && ng serve -w. Łatwiej i bezpieczniej jest pozwolić scss budować styl + czcionki niż próbować zmieniać kątowe infra infra;)
soywod
33
Najlepsza odpowiedź. Niewielka poprawa: użyj ~zamiast ../node_modules/, np.@import '~font-awesome/scss/font-awesome.scss';
m4js7er,
5
nie działa dla mnie z angular4 i scss. Widzę css, ale nie ikonę
Aniruddha Das
Mam ten sam problem na Angular4
Francesco
2
Użyj .cssimportu z ~font-awesome/css/font-awesome.min.cssi działa dobrze (domyślna ścieżka do czcionki) dla angular4 / cli
Tim
67

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

Ced
źródło
Po wykonaniu tych czynności nadal pojawia się ten sam błąd.
indra257
Nie udało się załadować plików .ttf, woff i woff2
indra257 13.04.17
Używam cli 1.0. Aby dokładnie sprawdzić, stworzyłem jedną przykładową aplikację, po prostu załadowałem niesamowitą czcionkę i wdrożyłem aplikację. wciąż pojawia się ten błąd.
indra257
@ indra257 Musiałem dodać $ fa-font-path: "../node_modules/font-awesome/fonts"; w styles.scss dla powyższych instrukcji do pracy
Todilo 24.04.17
Nie mam pliku style.scss w moim projekcie. Czy po dodaniu pliku styles.scss muszę wykonać inne kroki?
indra257
51

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>
baranina
źródło
1
Czy masz jakiś problem z dołączeniem niesamowitej czcionki? Myślę, że głównym problemem jest sprzedaż wiązana, gdy korzystamy z Cli. Pliki tff, woff, woff2 nie są pakowane.
indra257
Właśnie utworzyłem przykładową aplikację i postępowałem zgodnie z Twoimi instrukcjami. Dołączono aplikację za pomocą kompilacji ng. W konsoli nadal widzę komunikat Nie można załadować plików woff i błąd
woff2
1
To jest poprawne. Działa idealnie dobrze z ng serw. Z kompilacją ng działa dobrze, ale konsola pokazuje, że nie jest w stanie załadować niektórych plików woff, woff2.
indra257
Nie widzę tego samego problemu, więc spodziewam się, że coś jest nie tak z Twoimi plikami build / config. Sugeruję, aby powtórzyć swój problem z przypadkiem testowym i utworzyć z nim nowe pytanie.
baranina do
Stworzyłem pustą aplikację za pomocą kątowej-cli i dodałem niesamowite czcionki. Które pliki chcę sprawdzić?
indra257
26

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.

kuncevic.dev
źródło
Korzystając z opcji 1, usuń ../przed"../node_modules/font-awesome/css/font-awesome.css"
Alf Moh
DLACZEGO mam korzystać z nowego pakietu kątowego? Importowanie ich indywidualnie wydaje się bardziej PITA.
MDave
1
Mam na myśli, że npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-iconsw twojej odpowiedzi nie jest równa npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/angular-fontawesomew dokumentacji, przepraszam, jeśli brakuje mi czegoś oczywistego.
User632716
1
@ Użytkownik632716 OK właśnie dodał brakujący pakiet do polecenia instalacji npm.
kuncevic.dev
1
Wielkie dzięki ... Szukałem niesamowitej czcionki Angular 9 +. AKTUALIZACJA Luty 2020 jest najbardziej pomocną rzeczą po zmarnowaniu 1 dnia.
Tejashree
15

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)

Shusson
źródło
1
Wygląda na to, że próbuje zaimportować, ale pojawia się błąd zone.js:101 - GET http://localhost:4200/node_modules/font-awesome/css/font-awesome.css 404 (Not Found) ... plik faktycznie istnieje, ale wygląda na localhost:4200to, że nie działa z katalogu głównego tego folderu ... Jak spakować niesamowite czcionki do localhost:4200folderu głównego ...
microchip78
również używam [email protected]i styl konfiguracji plików angular-cli.jsonnie działa ...
microchip78
1
hmm, to dziwne, może uaktualnić do 1.0.0-beta.11-webpack.8?
shusson
13

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

Nabel
źródło
5

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.

McKenna
źródło
4

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;
}
Komercyjne samobójstwo
źródło
Dziękuję bardzo, że to dla mnie przyznane, teraz muszę wymyślić, jak uruchomić czcionki, ponieważ nie działa to dla mnie w
selektorze treści
@ jgerstle, określając czcionkę w bodypowinna działać, upewnij się, że nie zastępujesz czcionki w innym miejscu, być może przesłonisz ją h*lub ptagi, jak to zwykle robimy.
Commercial Suicide
Wydaje się, że coś to przesłania, ale nie sądzę, że to mój własny kod. Myślę, że może to być tylko domyślny chrome, ale to dziwne, ponieważ ustawiłem to na! Ważne i nadal wydaje się być nadpisywane. Będę musiał się temu bardziej przyjrzeć.
jgerstle
Mam to za pomocą: nie (.fa), aby zachować ten sam * selektor, ale nie
celuj w
4

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

Alf Moh
źródło
2
Kiedy to robię, otrzymuję tylko kwadraty na zdjęcia.
Gargoyle
to samo tutaj, jak usunąłeś kwadraty? @Gargoyle
AngularM
4

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.

Paweł
źródło
Zauważ, że twoje ścieżki zaczynają się od @fortawesome. Zwróć uwagę na słowo „FORT”, a nie „FONT”. Moja instalacja też to robi. Czy ktoś wie o co chodzi?
Helzgate
Nie wspominając o tym, że najwyraźniej trwają zmiany struktury. Zobacz ten post na
Githubie
@Aniketkale co nie działa? Przedstawiłem dwie opcje
Paul
3

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)

Nik
źródło
1
tylko jedna głowa do góry, że nie ma go angular-cli-build.jsw najnowszym oddziale
webpacka
Ponadto w bieżącym kodzie Angular-CLI nie znaleziono pliku vendorNpmFiles . Widząc zaakceptowaną odpowiedź Alona, ​​myślę, że jest nieaktualna?
Arjan
1
@Arjan tak, ta odpowiedź jest nieaktualna ... to było dla CLI pre webpack. Odpowiedź Alona jest odpowiedzią zaakceptowaną
Nik
3

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

Ron Michael
źródło
2

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

Briosheje
źródło
2

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]'
}
użytkownik3582315
źródło
2

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>
Helzgate
źródło
2

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';
Mojtaba Nava
źródło
To dobre pytanie. Zawsze było to dla mnie pytanie
Seyed Ali Mahmoody
2

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>

Shmulik
źródło
2

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!

Cherma Ramalho
źródło
2

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.

Imtiaz Shakil Siddique
źródło
1

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.

dpnmn
źródło
1

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

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

użytkownik1349544
źródło
Będziesz chciał dodać niesamowite czcionki do swoich „zależności”, a nie „zależności deweloperów”, ponieważ będą one potrzebne w ostatecznej wersji. Również powyższe instrukcje nie odpowiadają, w jaki sposób projekt Angular przejmie go po dodaniu go do pliku package.json.
Nik
1

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";
Ferdi Tolenaar
źródło
Próbowałem tego. Działa dobrze na poziomie lokalnym, ale kiedy próbuję go zbudować, ikony zniknęły.
Piyush Choudhary,
1

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.

Semir Hodzic
źródło
1

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]

aristotll
źródło
1

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

Archil Labadze
źródło