Angular 2+ ve Angular CLI kullanıyorum.

Yazı tipimi müthiş projeme nasıl eklerim?

Angular 2.0 son sürümünden sonra , Angular2 CLI projesinin yapısı değiştirildi - herhangi bir satıcı dosyasına ihtiyacınız yok, system.js yok - sadece web paketi. Böylece şunları yapabilirsiniz:

1. npm install font-awesome --save

2. Gelen angular-cli.jsondosyanın yerini styles[]diziyi ve aşağıdaki gibi burada font-müthiş referanslar dizinini ekleyin:

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

   Angular'ın daha yeni sürümlerinde, angular.jsonbunun yerine dosyayı kullanın ../. Örneğin, kullanın "node_modules/font-awesome/css/font-awesome.css".

3. İstediğiniz herhangi bir html dosyasına yazı tipi harika simgeler yerleştirin:

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

4. Uygulamayı durdurma Ctrl + csonra uygulamayı kullanarak yeniden çalıştırın, ng serveçünkü gözlemciler yalnızca src klasörü içindir ve angular-cli.json değişikliklerde gözlenmez.

5. Harika simgelerin tadını çıkarın!

SASS kullanıyorsanız, sadece npm ile kurabilirsiniz

npm install font-awesome --save

ve /src/styles.scssşununla içe aktarın :

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

İpucu: Mümkün olduğunda, angular-clialtyapıyla uğraşmaktan kaçının . ;)

En iyi cevap biraz modası geçmiş ve biraz daha kolay bir yol var.

1. npm üzerinden yükle

   npm install font-awesome --save

2. sizin style.css:

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

   veya style.scss:

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

   Düzenleme: yorumlarda belirtildiği gibi, yazı tipi satırının yeni sürümlerde$fa-font-path: "../../../node_modules/font-awesome/fonts";

~irade kullanarak sass içine bakmak node_module. Bunu göreli yoldan daha iyi yapmak daha iyidir. Bunun nedeni, npm'de bir bileşen yüklerseniz ve bileşen scss içinde font-awesome öğesini içe aktarırsanız, o noktada yanlış olacak göreli yolla değil, ~ ile düzgün çalışacaktır.

Bu yöntem, css içeren herhangi bir npm modülü için çalışır. SCSS için de çalışır. Ancak css'i styles.scss dosyasına içe aktarıyorsanız, işe yaramaz (ve tersi de geçerlidir). İşte nedeni

Açısal Projelerde Font-Awesome'i kullanmanın 3 bölümü vardır

1. Kurulum
2. Şekillendirme (CSS / SCSS)
3. Açısal Kullanım

Kurulum

NPM'den yükleyin ve paketinize kaydedin.

npm install --save font-awesome

Styling CSS kullanılıyorsa

Tarzınıza ekleyin. Css

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

Şekillendirme SCSS kullanılıyorsa

Style.scss dosyasına ekleyin

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

Düz Açısal 2.4+ 4+ ile kullanım

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

Açısal Malzeme ile Kullanım

App.module.ts dosyasında yapıcıyı, MdIconRegistry

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

ve eklemek MatIconModulesenin için @NgModuleithalat

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

}

Şimdi herhangi bir şablon dosyasında

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

GÜNCELLEŞTİRME Şubat 2020: artık
harika paket destekliyor, ng addancak yalnızca açısal 9 için kullanılabilir :

ng add @fortawesome/angular-fontawesome

GÜNCELLEŞTİRME 8 Ekim 2019:

Yeni bir paket kullanabilirsiniz https://www.npmjs.com/package/@fortawesome/angular-fontawesome

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

FontAwesomeModuleİthalatta ekle 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 { }

Simgeyi bileşeninizdeki özelliğe bağlayı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;
}

Şablondaki simgeyi kullanın src/app/app.component.html:

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

ORİJİNAL CEVAP:

Seçenek 1:

Sen kullanabilirsiniz açısal-font-müthiş npm modülünü

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

Modülü içe aktarın:

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

Açısal CLI kullanıyorsanız, angular-cli.json içindeki stillere yazı tipi olarak harika CSS'yi ekleyin

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

NOT: SCSS ön işlemcisini kullanıyorsanız scss için css dosyasını değiştirmeniz yeterlidir

Örnek Kullanım:

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

Optoin 2:

Bir yoktur resmi hikaye var

Font-awesome kitaplığını yükleyin ve package.json

npm install --save font-awesome

CSS Kullanımı

Uygulamanıza Font Awesome CSS simgeleri eklemek için ...

// in .angular-cli.json

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

SASS Kullanımı

Boş bir dosya oluşturun _variables.scssiçindesrc/ .

Aşağıdakileri şuraya ekle: _variables.scss :

$fa-font-path : '../node_modules/font-awesome/fonts'; Ayrıca styles.scssaşağıdakileri ekleyin:

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

Ölçek

Uygulamanızı geliştirme modunda çalıştırmak için sunum sunun ve http: // localhost: 4200 .

Font Awesome öğesinin doğru bir şekilde ayarlandığını doğrulamak src/app/app.component.htmliçin aşağıdakilere değiştirin ...

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

Bu dosyayı kaydettikten sonra, uygulama başlığının yanındaki Font Awesome simgesini görmek için tarayıcıya dönün.

Ayrıca ilgili bir soru var Açısal CLI varsayılan olarak açısal cli yazı tipi distkök çıktı, bu arada hiç bir sorun değil , yazı tipi harika yazı tipi dosyaları dist kök çıktılar .

İle Angular2RC5 veangular-cli 1.0.0-beta.11-webpack.8 size css ithalatı ile bunu başarabilirsiniz.

Sadece harika yazı tipini yükleyin:

npm install font-awesome --save

ve yapılandırılmış stil dosyalarınızdan birinde font-awesome dosyasını içe aktarın:

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

(stil dosyaları içinde yapılandırılır angular-cli.json)

Font-awesome artık belgelerine göre farklı bir şekilde yüklendiğinden, buna kararımı vereceğimi düşündüm.

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

Neden şimdi untawesome olduğunu kaçtı ama eski font-awesome geri düşmek yerine en son sürüm ile sopa olacağını düşündüm.

Sonra benim scss içine ithal

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

Bu yardımcı olur umarım

Yukarıdaki birçok talimat işe, ben bunlara bakmanızı öneririm. Ancak, dikkat edilmesi gereken bir şey:

Kullanmak <i class="fas fa-coffee"></i> işe yaramadı kurulum ve burada örnek simgesi de geçen hafta içinde Müthiş Yazı Tipi panoya kopyalanan sonra benim projem (yeni uygulama projesi sadece bir hafta daha eski).

Bu <i class="fa fa-coffee"></i> işe yarıyor . Projenize Font Awesome yükledikten sonra henüz çalışmıyorsa, o zaman işe yarayıp yaramadığını görmek için simgenizdeki sınıfı kontrol etmenizi öneririz.

Burada çok iyi cevaplar var. Ama hepsini denediyseniz ve hala fontawesome simgeleri yerine kareler alıyorsanız, css kurallarınızı kontrol edin. Benim durumumda aşağıdaki kural vardı:

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

Ve harika yazı tiplerini geçersiz kılar. Sorunumu çözmek *için seçiciyi değiştirmek body:

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

Açısal 6 için,

İlk npm install font-awesome --save

Ekle node_modules/font-awesome/css/font-awesome.cssiçin angular.json .

Unutmayın değil önünde herhangi nokta eklemektir node_modules/.

Bu mesaj entegre açıklamaktadır Fontawesome 5 içine açısal 6 (açısal 5 ve önceki versiyonlar çalışmaları da olacak, ama o zaman yazdıklarımı ayarlamak gerekir)

Seçenek 1: css Dosyalarını Ekleme

Profesyonel: Her simge dahil edilecek

Tersi: Her simge dahil edilecektir (tüm yazı tipleri dahil olduğundan daha büyük uygulama boyutu)

Aşağıdaki paketi ekleyin:

npm install @fortawesome/fontawesome-free-webfonts

Daha sonra açısal.json'unuza aşağıdaki satırları ekleyin:

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

2.Seçenek: Açısal paket

Pro: Daha küçük uygulama boyutu

Kontra: Ayrı olarak kullanmak istediğiniz her simgeyi ayrı ayrı eklemeniz gerekir

FontAwesome 5 Angular paketini kullanın:

npm install @fortawesome/angular-fontawesome

Simgeleri eklemek için belgelerini takip etmeniz yeterlidir. Svg-simgelerini kullanıyorlar, bu yüzden sadece svgs / simgelerini eklemeniz gerekiyor, gerçekten kullanıyorsunuz.

Bazı deneylerden sonra aşağıdakileri yapmayı başardım:

1. Npm ile yükle:

   npm install font-awesome --save
   

2. angular-cli-build.js dosyasına ekle :

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

3. index.html dosyasına ekle

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

Anahtar, angular-cli-build.js dosyasına yazı tipi dosya türlerini eklemekti

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

Kabul edilen cevap eski.

Açısal 9 ve Fontawesome 5 için

1. FontAwesome'i Yükle

   npm install @ fortawesome / fontawesome-ücretsiz - kaydet

2. Angular.json'da stiller altında kaydedin

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

3. Uygulamanızda kullanın

Düzenleme: Açısal ^ 4.0.0 ve Elektron ^ 1.4.3 kullanıyorum

ElectronJS veya benzerleriyle ilgili sorunlarınız varsa ve bir çeşit 404 hatası varsa, webpack.config.jsekleyerek (ve npm veya package.json dosyasında font-awesome düğüm modülünün kurulu olduğunu varsayarak) olası bir geçici çözümdür. :

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

Kullandığım webpack yapılandırmasının çıktısı olduğunu ve dist'de webpack tarafından src/app/distbir assetsklasör oluşturulduğunu unutmayın:

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

Temel olarak şu anda olan:

• Webpack, fontlar klasörünü dev varlıklar klasörüne kopyalıyor.
• Webpack için klasör dev varlıklarını kopyalıyor distvarlıklar klasörüne

Şimdi, derleme işlemi tamamlandığında, uygulamanın .scssdosyayı ve simgeleri içeren klasörü araması ve düzgün bir şekilde çözmesi gerekir. Bunları çözmek için bunu webpack yapılandırmamda kullandım:

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

Son olarak, .scssdosyada, font-awesome .scss dosyasını içe aktarıyorum ve tekrar, yazı tiplerinin yolunu tanımlıyorum dist/assets/font-awesome/fonts. Bunun distnedeni, webpack.config dosyamdaki output.path öğesininhelpers.root('src/app/dist');

Yani, içinde app.scss:

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

Bu şekilde, yazı tipi yolunu (.scss dosyasında daha sonra kullanılır) tanımlayacağını ve ~font-awesomeiçindeki font-awesome yolunu çözmek için .scss dosyasını içe aktaracağını unutmayın node_modules.

Bu oldukça zor, ancak Electron.js ile ilgili 404 hata sorununu çözmenin tek yolu bu

Https://github.com/AngularClass/angular-starter adresinden başlayarak, birçok farklı yapılandırma kombinasyonunu test ettikten sonra, AoT ile çalışmasını sağlamak için yaptığım şey bu.

Daha önce de söylediğim gibi, benim app.component.scss:

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

Sonra webpack.config.js'de (aslında başlangıç ​​paketindeki webpack.commong.js):

Eklentiler bölümünde:

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

Kurallar bölümünde:

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

AngularCLI 6.0.3 ve Materyal Tasarımı ile çalışan FontAwesome 5.2.0'ın en son sürümünü almaya çalışırken birkaç saat harcadım. FontAwesome web sitesinden npm kurulum talimatlarını izledim

En son dokümanları aşağıdakileri kullanarak yüklemenizi söyler:

npm install @fortawesome/fontawesome-free

Birkaç saat harcadıktan sonra nihayet kaldırdım ve aşağıdaki komutu kullanarak harika yazı tipi yükledim (bu FontAwesome v4.7.0'ı yükler):

npm install font-awesome --save

Şimdi kullanarak iyi çalışıyor:

$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 size scalableanında özelleştirilebilen vektör simgeleri verir - boyut, renk, gölge ve gücü ile yapılabilecek her şey CSS.

Yeni bir proje oluşturun ve projeye gidin.

ng new navaApp
cd navaApp

Font-awesome kitaplığını yükleyin ve bağımlılığı ekleyin package.json.

npm install --save font-awesome

CSS Kullanımı

Uygulamanıza Font Awesome CSS simgeleri eklemek için ...

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

SASS Kullanımı

SASS ile yeni bir proje oluşturun:

ng new cli-app --style=scss

Mevcut proje ile kullanmak için CSS:

Rename src/styles.cssiçin src/styles.scss Değişim angular.jsoniçin görünüme styles.scssyerine css:

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

Değiştirmek için emin olun styles.cssiçin styles.scss.

Boş bir dosya oluşturun _variables.scssiçindesrc/ .

Aşağıdakileri şuraya ekleyin_variables.scss :

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

Ayrıca styles.scssaşağıdakileri ekleyin:

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

Angular Font Awesome paketini kullanabilirsiniz

npm install - kaydet font-awesome açısal-font-awesome

ve daha sonra modülünüze aktarın:

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

ve stili açısal cli dosyasında içe aktarın:

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

npm kitaplığındaki paket hakkında daha fazla ayrıntı görün:

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

ve sonra şu şekilde kullanın:

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

Açısal projenizde Font Awesome 5'i kullanmak için, src / index.html dosyasına aşağıdaki kodu ekleyin.

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

İyi şanslar!

Fontawesome 5.x + için en basit yol aşağıdaki gibi olabilir,

npm paketini kullanarak yükle: npm install --save @fortawesome/fontawesome-free

Senin içinde styles.scssdosyanın şunlardır:

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

Not: _variables.scssdosyanız varsa , $fa-font-pathiçine değil styles.scssdosya içine eklemek daha uygundur .

LESS (SCSS değil) ve Açısal 2.4.0 ve standart Webpack (Açısal CLI değil) kullanarak aşağıdakiler benim için çalıştı:

npm install --save font-awesome

ve (benim app.component.less dosyasında):

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

ve elbette bu açık ve son derece sezgisel snippet'e ihtiyacınız olabilir (webpack.conf'daki module.loaders içinde)

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

Yükleyici tür webpack hatalarını düzeltmek için orada

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

ve normal ifade bu svg referanslarıyla eşleşir (sürüm belirtimi olsun veya olmasın). Web paketi kurulumunuza bağlı olarak ihtiyacınız olmayabilir veya başka bir şeye ihtiyacınız olabilir.

Package.json dosyasına "devDependencies" font-awesome: "sürüm numarası" olarak ekleyin

Yapılandırdığınız Komut İstemi türü npm komutuna gidin.

Font Awesome 5+ kullanmak istedim ve çoğu yanıt eski sürümlere odaklanıyor

Yeni Font Awesome 5+ için açısal proje henüz yayınlanmadı, bu yüzden font awesome web sitesi atm'de belirtilen örneklerden yararlanmak istiyorsanız, bir çalışma kullanmanız gerekiyor. (özellikle fa sınıfı yerine fas, uzak sınıflar)

Sadece stn.css dosyasında cdn'yi Font Awesome 5'e aktardım. Sadece birisi cevap benden daha hızlı bulmanıza yardımcı olması durumunda ekledi :-)

Style.css içindeki kod

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

Herhangi bir nedenle paket npm kuramazsanız. Her zaman index.html dosyasını düzenleyebilir ve başınıza harika CSS yazı tipi ekleyebilirsiniz. Ve sonra sadece projede kullandım.

Webpack2 için:

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

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

Açısal 9 için ng:

ng add @fortawesome/angular-fontawesome@0.6.x

Daha Fazla Bilgi İçin Buraya Bakın

Şimdi Angular CLI'de fontAwesome'i yüklemenin birkaç yolu var:

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

Burada referans: https://github.com/FortAwesome/angular-fontawesome