Saya menggunakan Angular 2+ dan Angular CLI.

Bagaimana cara menambahkan font-mengagumkan ke proyek saya?

Setelah rilis final Angular 2.0, struktur proyek Angular2 CLI telah diubah - Anda tidak memerlukan file vendor, tanpa system.js - hanya webpack. Jadi Anda melakukannya:

1. npm install font-awesome --save

2. Dalam angular-cli.jsonfile temukan styles[]array dan tambahkan direktori referensi font-mengagumkan di sini, seperti di bawah ini:

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

   Di versi Angular yang lebih baru, gunakan angular.jsonfile, tanpa ../. Sebagai contoh, gunakan "node_modules/font-awesome/css/font-awesome.css".

3. Tempatkan beberapa ikon font-mengagumkan dalam file html yang Anda inginkan:

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

4. Hentikan aplikasi Ctrl+ ckemudian jalankan kembali aplikasi menggunakan ng servekarena pengamat hanya untuk folder src dan angular-cli.json tidak diamati untuk perubahan.

5. Nikmati ikon luar biasa Anda!

Jika Anda menggunakan SASS, Anda bisa menginstalnya melalui npm

npm install font-awesome --save

dan impor di Anda /src/styles.scssdengan:

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

Kiat: Kapan pun memungkinkan, hindari mengacaukan angular-cliinfrastruktur. ;)

Jawaban teratas agak ketinggalan jaman dan ada cara yang sedikit lebih mudah.

1. instal melalui npm

   npm install font-awesome --save

2. di Anda style.css:

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

   atau di Anda style.scss:

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

   Sunting: sebagaimana tercantum dalam komentar, baris untuk font harus diubah pada versi yang lebih baru$fa-font-path: "../../../node_modules/font-awesome/fonts";

menggunakan ~akan membuat sass melihat ke dalam node_module. Lebih baik melakukannya dengan cara ini daripada dengan jalur relatif. Alasannya adalah bahwa jika Anda mengunggah komponen pada npm, dan Anda mengimpor font-awesome di dalam komponen scss maka itu akan berfungsi dengan baik ~ dan bukan dengan jalur relatif yang akan salah pada saat itu.

Metode ini berfungsi untuk setiap modul npm yang berisi css. Ia bekerja untuk scss juga. Namun jika Anda mengimpor css ke styles.scss Anda, itu tidak akan berfungsi (dan mungkin sebaliknya). Inilah sebabnya

Ada 3 bagian untuk menggunakan Font-Awesome di Proyek Angular

1. Instalasi
2. Styling (CSS / SCSS)
3. Penggunaan dalam Angular

Instalasi

Instal dari NPM dan simpan ke package.json Anda

npm install --save font-awesome

Styling Jika menggunakan CSS

Masukkan ke style.css Anda

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

Styling Jika menggunakan SCSS

Masukkan ke style.scss Anda

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

Penggunaan dengan Angular biasa 2.4+ 4+

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

Penggunaan dengan Bahan Sudut

Di app.module.ts Anda memodifikasi konstruktor untuk menggunakan MdIconRegistry

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

dan tambahkan MatIconModuleke @NgModuleimpor Anda

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

}

Sekarang dalam file template apa pun yang sekarang dapat Anda lakukan

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

UPDATE Feb 2020: paket
fortawesome sekarang mendukung ng addtetapi hanya tersedia untuk sudut 9 :

ng add @fortawesome/angular-fontawesome

UPDATE 8 Okt 2019:

Anda dapat menggunakan paket baru https://www.npmjs.com/package/@fortawesome/angular-fontawesome

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

Tambahkan FontAwesomeModuleke impor di 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 { }

Ikat ikon ke properti di komponen Anda 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;
}

Gunakan ikon di templat src/app/app.component.html:

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

JAWABAN ASLI:

Pilihan 1:

Anda dapat menggunakan modul npm angular-font-awesome

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

Impor modul:

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

Jika Anda menggunakan Angular CLI, tambahkan CSS font-mengagumkan ke gaya di dalam angular-cli.json

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

CATATAN: Jika menggunakan preprosesor SCSS, ubah saja css untuk scss

Contoh Penggunaan:

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

Optoin 2:

Ada cerita resmi untuk itu sekarang

Instal pustaka font-mengagumkan dan tambahkan ketergantungan ke package.json

npm install --save font-awesome

Menggunakan CSS

Untuk menambahkan Font ikon CSS Luar Biasa ke aplikasi Anda ...

// in .angular-cli.json

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

Menggunakan SASS

Buat file kosong _variables.scssdi src/.

Tambahkan yang berikut ke _variables.scss:

$fa-font-path : '../node_modules/font-awesome/fonts'; Di styles.scsstambahkan yang berikut:

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

Uji

Jalankan ng serve untuk menjalankan aplikasi Anda dalam mode kembangkan, dan navigasikan ke http: // localhost: 4200 .

Untuk memverifikasi Font Awesome telah diatur dengan benar, ubah src/app/app.component.htmlke ...

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

Setelah menyimpan file ini, kembali ke browser untuk melihat ikon Font Awesome di sebelah judul aplikasi.

Juga ada pertanyaan terkait Angular CLI menghasilkan font-mengagumkan font file dist root karena secara default angular cli output font ke distroot, yang dengan cara tidak masalah sama sekali.

Dengan Angular2RC5 danangular-cli 1.0.0-beta.11-webpack.8 Anda dapat mencapainya dengan impor css.

Cukup instal font yang mengagumkan:

npm install font-awesome --save

dan kemudian impor font-mengagumkan di salah satu file gaya terkonfigurasi Anda:

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

(file gaya dikonfigurasikan dalam angular-cli.json)

Saya pikir saya akan memberikan resolusi saya untuk ini karena font-mengagumkan sekarang diinstal berbeda sesuai dengan dokumentasi mereka.

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

Mengapa itu fortawesome sekarang luput dari saya tetapi saya pikir saya akan tetap dengan versi terbaru daripada jatuh kembali ke font-mengagumkan yang lama.

Lalu saya mengimpornya ke scss saya

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

Semoga ini membantu

Banyak instruksi di atas berfungsi, saya sarankan melihat itu. Namun, sesuatu yang perlu diperhatikan:

Penggunaan <i class="fas fa-coffee"></i> tidak berhasil di proyek saya (proyek latihan baru yang baru berumur seminggu) setelah instalasi dan ikon sampel di sini juga disalin ke clipboard dari Font Awesome dalam seminggu terakhir.

Ini <i class="fa fa-coffee"></i> berhasil . Jika setelah menginstal Font Awesome pada proyek Anda itu belum berfungsi, saya sarankan memeriksa kelas pada ikon Anda untuk menghapus 's' untuk melihat apakah itu berfungsi kemudian.

Ada banyak jawaban bagus di sini. Tetapi jika Anda mencoba semuanya dan masih mendapatkan kotak alih-alih ikon fontawesome, periksa aturan css Anda. Dalam kasus saya, saya memiliki aturan berikut:

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

Dan itu menimpa font yang fontawesome. Hanya mengganti *pemilih untuk bodymemecahkan masalah saya:

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

Untuk Angular 6,

Pertama npm install font-awesome --save

Tambahkan node_modules/font-awesome/css/font-awesome.csske angular.json .

Ingatlah untuk tidak menambahkan titik di depan node_modules/.

Posting ini menjelaskan cara mengintegrasikan Fontawesome 5 ke Angular 6 (Angular 5 dan versi sebelumnya juga akan berfungsi, tetapi kemudian Anda harus menyesuaikan tulisan saya)

Opsi 1: Tambahkan File-css

Pro: Setiap ikon akan disertakan

Contra: Setiap ikon akan disertakan (ukuran aplikasi lebih besar karena semua font disertakan)

Tambahkan paket berikut:

npm install @fortawesome/fontawesome-free-webfonts

Setelah itu tambahkan baris berikut ke angular.json Anda:

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

Opsi 2: Paket sudut

Pro: Ukuran aplikasi lebih kecil

Contra: Anda harus memasukkan setiap ikon yang ingin Anda gunakan secara terpisah

Gunakan paket FontAwesome 5 Angular:

npm install @fortawesome/angular-fontawesome

Cukup ikuti dokumentasi mereka untuk menambahkan ikon. Mereka menggunakan svg-icons, jadi Anda hanya perlu menambahkan svgs / ikon, Anda benar-benar menggunakan.

Setelah beberapa percobaan, saya berhasil agar yang berikut berfungsi:

1. Instal dengan npm:

   npm install font-awesome --save
   

2. tambahkan ke file angular-cli-build.js :

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

3. tambahkan ke index.html

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

Kuncinya adalah untuk memasukkan jenis file font dalam file angular-cli-build.js

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

Jawaban yang diterima sudah usang.

Untuk angular 9 dan Fontawesome 5

1. Instal FontAwesome

   NPM instal @ fortawesome / fontawesome-free - save

2. Daftarkan di angular.json di bawah gaya

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

3. Gunakan di aplikasi Anda

Sunting: Saya menggunakan sudut ^ 4.0.0 dan Elektron ^ 1.4.3

Jika Anda memiliki masalah dengan ElectronJS atau serupa dan memiliki semacam kesalahan 404, solusi yang mungkin adalah untuk menghapus Anda webpack.config.js, dengan menambahkan (dan dengan asumsi bahwa Anda memiliki modul node font-awesome diinstal melalui npm atau dalam file package.json) :

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

Perhatikan bahwa konfigurasi webpack yang saya gunakan memiliki src/app/distsebagai output, dan, pada gilirannya, assetsfolder dibuat oleh 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'
},

Jadi pada dasarnya, apa yang sedang terjadi adalah:

• Webpack sedang menyalin folder font ke folder dev asset.
• Webpack menyalin folder aset dev ke distfolder aset

Sekarang, ketika proses pembangunan akan selesai, aplikasi perlu mencari .scssfile dan folder yang berisi ikon, menyelesaikannya dengan benar. Untuk mengatasinya, saya telah menggunakan ini di konfigurasi webpack saya:

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

Akhirnya, dalam .scssfile tersebut, saya mengimpor font .scss yang mengagumkan dan menentukan jalur font, yang, sekali lagi dist/assets/font-awesome/fonts,. Jalannya adalahdist karena di webpack.config saya output.path diatur sebagaihelpers.root('src/app/dist');

Jadi, di app.scss:

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

Perhatikan bahwa, dengan cara ini, ini akan menentukan jalur font (digunakan nanti dalam file .scss) dan mengimpor file .scss menggunakan ~font-awesomeuntuk menyelesaikan jalur font-mengagumkan dinode_modules .

Ini cukup sulit, tapi itu satu-satunya cara yang saya temukan untuk mengatasi masalah kesalahan 404 dengan Electron.js

Mulai dari https://github.com/AngularClass/angular-starter , setelah menguji banyak kombinasi konfigurasi yang berbeda, inilah yang saya lakukan untuk membuatnya bekerja dengan AoT.

Seperti yang sudah dikatakan berkali-kali, di app.component.scss:

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

Kemudian di webpack.config.js (sebenarnya webpack.commong.js di paket perdana):

Di bagian plugin:

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

Di bagian aturan:

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

Saya menghabiskan beberapa jam untuk mencoba versi terbaru dari FontAwesome 5.2.0 bekerja dengan AngularCLI 6.0.3 dan Material Design. Saya mengikuti instruksi instalasi npm dari situs web FontAwesome

Dokumen terbaru mereka memerintahkan Anda menginstal menggunakan yang berikut ini:

npm install @fortawesome/fontawesome-free

Setelah menghabiskan beberapa jam akhirnya saya menghapus dan menginstal font yang mengagumkan menggunakan perintah berikut (ini menginstal FontAwesome v4.7.0):

npm install font-awesome --save

Sekarang berfungsi dengan baik menggunakan:

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

Font Awesome memberi Anda scalableikon vektor yang dapat langsung dikustomisasi — ukuran, warna, drop shadow, dan apa pun yang dapat dilakukan dengan kekuatan CSS.

Buat proyek baru dan arahkan ke proyek.

ng new navaApp
cd navaApp

Instal pustaka font-mengagumkan dan tambahkan ketergantungan ke package.json.

npm install --save font-awesome

Menggunakan CSS

Untuk menambahkan Font ikon CSS Luar Biasa ke aplikasi Anda ...

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

Menggunakan SASS

Buat proyek baru dengan SASS:

ng new cli-app --style=scss

Untuk digunakan dengan proyek yang ada dengan CSS:

Ganti nama src/styles.cssmenjadi src/styles.scss Ubah angular.jsonuntuk mencari styles.scssalih - alih css:

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

Pastikan untuk mengubah styles.csske styles.scss.

Buat file kosong _variables.scssdi src/.

Tambahkan yang berikut ke _variables.scss:

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

Di styles.scsstambahkan yang berikut:

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

Anda dapat menggunakan paket Angular Font Awesome

npm instal - save font-awesome angular-font-awesome

dan kemudian impor di modul Anda:

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

dan impor gaya dalam file sudut-cli:

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

lihat detail lebih lanjut tentang paket di perpustakaan npm:

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

dan kemudian gunakan seperti ini:

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

Untuk menggunakan Font Awesome 5 di proyek Angular Anda, masukkan kode di bawah ini di file src / index.html.

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

Semoga berhasil!

Untuk fontawesome 5.x + cara paling sederhana adalah sebagai berikut,

instal menggunakan paket npm: npm install --save @fortawesome/fontawesome-free

Dalam styles.scssfile Anda termasuk:

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

Catatan: jika Anda memiliki _variables.scssfile maka lebih tepat untuk memasukkan $fa-font-pathdi dalamnya dan tidak di dalam styles.scssfile.

Menggunakan KURANG (bukan SCSS) dan Angular 2.4.0 dan Webpack standar (bukan Angular CLI, yang berikut ini berfungsi untuk saya:

npm install --save font-awesome

dan (di app.component.less):

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

dan tentu saja Anda mungkin memerlukan cuplikan yang jelas dan sangat intuitif ini (di module.loaders di webpack.conf)

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

Loader ada di sana untuk memperbaiki kesalahan jenis webpack

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

dan regexp cocok dengan referensi-svg tersebut (dengan atau tanpa spesifikasi versi). Tergantung pada pengaturan webpack Anda, Anda mungkin tidak membutuhkannya atau Anda mungkin memerlukan sesuatu yang lain.

Tambahkan di package.json Anda sebagai "devDependencies" font-awesome: "nomor versi"

Pergi ke Command Prompt ketik perintah npm yang Anda konfigurasikan.

Saya ingin menggunakan Font Awesome 5+ dan sebagian besar jawaban fokus pada versi yang lebih lama

Untuk Font Awesome 5+ baru proyek sudut belum dirilis, jadi jika Anda ingin menggunakan contoh-contoh yang disebutkan di atm situs web font mengagumkan Anda perlu menggunakan pekerjaan sekitar. (terutama fas, kelas jauh, bukan kelas fa)

Saya baru saja mengimpor cdn ke Font Awesome 5 di styles.css saya. Baru saja menambahkan ini jika ini membantu seseorang menemukan jawaban lebih cepat daripada yang saya lakukan :-)

Kode dalam Style.css

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

Jika karena alasan tertentu Anda tidak dapat menginstal paket throw npm. Anda selalu dapat mengedit index.html dan menambahkan font CSS yang luar biasa di kepala. Dan kemudian menggunakannya dalam proyek.

Untuk penggunaan webpack2:

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

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

Untuk Angular 9 menggunakan ng:

ng add @fortawesome/[email protected]

Lihat Di Sini Untuk Informasi Lebih Lanjut

Sekarang ada beberapa cara untuk menginstal fontAwesome di 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

Referensi di sini: https://github.com/FortAwesome/angular-fontawesome