Estou usando Angular 2+ e Angular CLI.

Como adiciono o font-awesome ao meu projeto?

Após o lançamento final do Angular 2.0, a estrutura do projeto da CLI do Angular2 foi alterada - você não precisa de nenhum arquivo de fornecedor, nenhum system.js - apenas o webpack. Então você faz:

1. npm install font-awesome --save

2. No angular-cli.jsonarquivo, localize a styles[]matriz e adicione o diretório de referências de fontes impressionantes aqui, como abaixo:

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

   Nas versões mais recentes do Angular, use o angular.jsonarquivo, sem o ../. Por exemplo, use "node_modules/font-awesome/css/font-awesome.css".

3. Coloque alguns ícones impressionantes de fontes em qualquer arquivo html que desejar:

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

4. Pare o aplicativo Ctrl+ ce execute novamente o aplicativo usando ng serveporque os observadores são apenas para a pasta src e angular-cli.json não é observado para alterações.

5. Aproveite seus ícones impressionantes!

Se você estiver usando o SASS, basta instalá-lo via npm

npm install font-awesome --save

e importe-o no seu /src/styles.scsscom:

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

Dica: Sempre que possível, evite mexer na angular-cliinfraestrutura. ;)

A resposta principal está um pouco desatualizada e existe uma maneira um pouco mais fácil.

1. instalar através do npm

   npm install font-awesome --save

2. no seu style.css:

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

   ou no seu style.scss:

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

   Editar: conforme observado nos comentários, a linha de fontes deve ser alterada nas versões mais recentes para$fa-font-path: "../../../node_modules/font-awesome/fonts";

usando o ~fará com que o sass olhe node_module. É melhor fazê-lo desta maneira do que com o caminho relativo. O motivo é que, se você fizer o upload de um componente no npm e importar fonte impressionante dentro do componente scss, ele funcionará corretamente com ~ e não com o caminho relativo que estará errado nesse momento.

Este método funciona para qualquer módulo npm que contenha css. Também funciona para o scss. No entanto, se você estiver importando css para o styles.scss, ele não funcionará (e talvez vice-versa). Aqui está o porquê

Existem 3 partes para usar o Font-Awesome em projetos angulares

1. Instalação
2. Estilo (CSS / SCSS)
3. Uso em Angular

Instalação

Instale a partir do NPM e salve no seu package.json

npm install --save font-awesome

Estilo Se estiver usando CSS

Insira no seu style.css

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

Estilo Se estiver usando SCSS

Insira no seu style.scss

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

Uso com Angular simples 2.4+ 4+

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

Uso com material angular

Em seu app.module.ts, modifique o construtor para usar o MdIconRegistry

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

e adicione MatIconModuleàs suas @NgModuleimportações

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

}

Agora, em qualquer arquivo de modelo, agora você pode fazer

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

ATUALIZAÇÃO fev 2020: o pacote
fortawesome agora suporta, ng addmas está disponível apenas para o angular 9 :

ng add @fortawesome/angular-fontawesome

ATUALIZAÇÃO 8 de out de 2019:

Você pode usar um novo pacote https://www.npmjs.com/package/@fortawesome/angular-fontawesome

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

Adicionar FontAwesomeModuleàs importações em 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 { }

Amarre o ícone à propriedade em seu componente 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;
}

Use o ícone no modelo src/app/app.component.html:

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

RESPOSTA ORIGINAL:

Opção 1:

Você pode usar o módulo npm angular-font-awesome

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

Importe o módulo:

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

Se você estiver usando a Angular CLI, adicione o CSS impressionante de fonte aos estilos dentro do angular-cli.json

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

NOTA: Se estiver usando o pré-processador SCSS, altere o css para scss

Exemplo de uso:

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

Optoin 2:

Há uma história oficial para isso agora

Instale a biblioteca incrível de fontes e adicione a dependência ao package.json

npm install --save font-awesome

Usando CSS

Para adicionar ícones CSS impressionantes ao seu aplicativo ...

// in .angular-cli.json

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

Usando o SASS

Crie um arquivo vazio _variables.scssnosrc/ .

Adicione o seguinte a _variables.scss:

$fa-font-path : '../node_modules/font-awesome/fonts'; Em styles.scssadicionar o seguinte:

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

Teste

Execute ng serve para executar seu aplicativo no modo de desenvolvimento e navegue para http: // localhost: 4200 .

Para verificar se o Font Awesome foi configurado corretamente, mude src/app/app.component.htmlpara o seguinte ...

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

Depois de salvar este arquivo, retorne ao navegador para ver o ícone Fonte impressionante ao lado do título do aplicativo.

Também há uma pergunta relacionada: A CLI angular envia os arquivos de fonte impressionantes para a raiz dist, pois por padrão, o angular cli envia as fontes para a distraiz, o que, a propósito, não é um problema.

Com o Angular2RC5 e angular-cli 1.0.0-beta.11-webpack.8você pode conseguir isso com importações de css.

Basta instalar a fonte incrível:

npm install font-awesome --save

e importe a fonte awesome em um dos arquivos de estilo configurados:

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

(os arquivos de estilo estão configurados em angular-cli.json)

Pensei em colocar minha resolução nisso, já que o font-awesome agora está instalado de maneira diferente, de acordo com a documentação deles.

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

Por que isso é impressionante agora me escapa, mas pensei que eu continuaria com a versão mais recente, em vez de voltar à antiga fonte - incrível.

Então eu importei para o meu 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";

Espero que isto ajude

Muitas instruções acima funcionam, sugiro olhar para elas. No entanto, algo a ser observado:

O uso <i class="fas fa-coffee"></i> não funcionou no meu projeto (novo projeto de prática apenas uma semana) após a instalação e o ícone de amostra aqui também foi copiado para a área de transferência do Font Awesome na semana passada.

Isso <i class="fa fa-coffee"></i> funciona . Se após a instalação do Font Awesome em seu projeto ainda não estiver funcionando, sugiro verificar a classe no seu ícone para remover os 's' para ver se funciona.

Há muitas boas respostas aqui. Mas se você tentou todos eles e ainda obtém quadrados em vez de ícones impressionantes, verifique suas regras de css. No meu caso, eu tinha a seguinte regra:

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

E substitui fontes impressionantes. Apenas substituindo o *seletor para bodyresolver o meu problema:

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

Para Angular 6,

Primeiro npm install font-awesome --save

Adicionar node_modules/font-awesome/css/font-awesome.cssa angular.json .

Lembre-se de não adicionar nenhum ponto na frente do node_modules/.

Este post descreve como integrar o Fontawesome 5 ao Angular 6 (o Angular 5 e as versões anteriores também funcionarão, mas você precisará ajustar meus escritos)

Opção 1: Adicione os arquivos css

Pro: todos os ícones serão incluídos

Contra: Todos os ícones serão incluídos (tamanho maior do aplicativo porque todas as fontes estão incluídas)

Adicione o seguinte pacote:

npm install @fortawesome/fontawesome-free-webfonts

Depois, adicione as seguintes linhas ao seu 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"
],
...    
}

Opção 2: pacote angular

Pro: tamanho menor do aplicativo

Contra: você precisa incluir todos os ícones que deseja usar separadamente

Use o pacote FontAwesome 5 Angular:

npm install @fortawesome/angular-fontawesome

Basta seguir a documentação deles para adicionar os ícones. Eles usam os svg-icons, então você só precisa adicionar os svgs / icons, você realmente usa.

Após algumas experiências, consegui o seguinte trabalho:

1. Instale com o npm:

   npm install font-awesome --save
   

2. adicione ao arquivo angular-cli-build.js :

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

3. adicione ao index.html

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

A chave era incluir os tipos de arquivo de fonte no arquivo angular-cli-build.js

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

A resposta aceita está desatualizada.

Para angular 9 e Fontawesome 5

1. Instalar FontAwesome

   npm install @ fortawesome / fontawesome-free --save

2. Registre-o no angular.json em styles

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

3. Use-o no seu aplicativo

Edit: Estou usando angular ^ 4.0.0 e Electron ^ 1.4.3

Se você tiver problemas com o ElectronJS ou semelhante e tiver um erro 404, uma solução possível é editar o seu webpack.config.js, adicionando (e assumindo que você possui o módulo do nó incrível de fonte instalado por meio do npm ou no arquivo package.json) :

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

Observe que a configuração do webpack que estou usando tem src/app/distcomo saída e, em dist, uma assetspasta é criada pelo 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'
},

Então, basicamente, o que está acontecendo atualmente é:

• O Webpack está copiando a pasta fonts para a pasta dev assets.
• O Webpack está copiando a pasta dev assets para a distpasta assets

Agora, quando o processo de compilação for concluído, o aplicativo precisará procurar o .scssarquivo e a pasta que contém os ícones, resolvendo-os adequadamente. Para resolvê-los, usei isso na minha configuração do webpack:

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

Finalmente, no .scssarquivo, estou importando o .scss de fonte impressionante e definindo o caminho das fontes, que é, novamente dist/assets/font-awesome/fonts,. O caminho é distporque no meu webpack.config o output.path é definido comohelpers.root('src/app/dist');

Então, em app.scss:

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

Observe que, dessa maneira, ele definirá o caminho da fonte (usado posteriormente no arquivo .scss) e importará o arquivo .scss usando ~font-awesomepara resolver o caminho impressionante da fonte node_modules.

Isso é bastante complicado, mas é a única maneira que eu encontrei para contornar o problema de erro 404 com o Electron.js

A partir de https://github.com/AngularClass/angular-starter , depois de testar várias combinações diferentes de configurações, aqui está o que eu fiz para fazê-lo funcionar com o AoT.

Como já foi dito muitas vezes, no meu app.component.scss:

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

Em seguida, no webpack.config.js (na verdade, webpack.commong.js no pacote inicial):

Na seção de plugins:

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

Na seção de regras:

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

Perdi várias horas tentando obter a versão mais recente do FontAwesome 5.2.0 trabalhando com o AngularCLI 6.0.3 e o Material Design. Segui as instruções de instalação npm do site FontAwesome

Os documentos mais recentes instruem você a instalar usando o seguinte:

npm install @fortawesome/fontawesome-free

Depois de desperdiçar várias horas, finalmente o desinstalei e instalei a fonte awesome usando o seguinte comando (isso instala o FontAwesome v4.7.0):

npm install font-awesome --save

Agora está funcionando bem usando:

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

O Font Awesome oferece scalableícones vetoriais que podem ser personalizados instantaneamente - tamanho, cor, sombra projetada e tudo o que pode ser feito com o poder de CSS.

Crie um novo projeto e navegue no projeto.

ng new navaApp
cd navaApp

Instale a biblioteca impressionante de fontes e adicione a dependência package.json.

npm install --save font-awesome

Usando CSS

Para adicionar ícones CSS impressionantes ao seu aplicativo ...

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

Usando o SASS

Crie um novo projeto com o SASS:

ng new cli-app --style=scss

Para usar com o projeto existente com CSS:

Renomeie src/styles.csspara src/styles.scss Alterar angular.jsonpara procurar em styles.scssvez de css:

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

Certifique-se de mudar styles.csspara styles.scss.

Crie um arquivo vazio _variables.scssnosrc/ .

Adicione o seguinte a _variables.scss:

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

Em styles.scssadicionar o seguinte:

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

Você pode usar o pacote Angular Font Awesome

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

e importe no seu módulo:

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

e importe o estilo no arquivo angular-cli:

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

veja mais detalhes sobre o pacote na biblioteca npm:

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

e use-o assim:

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

Para usar o Font Awesome 5 em seu projeto Angular, insira o código abaixo no arquivo src / index.html.

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

Boa sorte!

Para o fontawesome 5.x +, a maneira mais simples seria a seguinte,

instale usando o pacote npm: npm install --save @fortawesome/fontawesome-free

No seu styles.scssarquivo, inclua:

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

Nota: se você tiver um _variables.scssarquivo, é mais apropriado incluir o $fa-font-pathinterior e não o styles.scssarquivo.

Usando LESS (não SCSS) e Angular 2.4.0 e Webpack padrão (não Angular CLI, o seguinte funcionou para mim:

npm install --save font-awesome

e (no meu app.component.less):

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

e é claro que você pode precisar desse snippet óbvio e altamente intuitivo (em module.loaders em webpack.conf)

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

O carregador está lá para corrigir erros do tipo webpack

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

e o regexp corresponde a essas referências-svg (com ou sem especificação de versão). Dependendo da configuração do seu webpack, você pode não precisar ou precisar de outra coisa.

Adicione-o ao seu package.json como "devDependencies" font-awesome: "número da versão"

Vá para o prompt de comando, digite o comando npm que você configurou.

Eu queria usar o Font Awesome 5+ e a maioria das respostas se concentra em versões mais antigas

Para o novo Font Awesome 5+, o projeto angular ainda não foi lançado. Portanto, se você quiser usar os exemplos mencionados no site do font awesome website, você precisará usar uma solução alternativa. (especialmente as classes fas, far em vez da classe fa)

Acabei de importar o cdn para o Font Awesome 5 no meu styles.css. Apenas adicionei isso no caso de ajudar alguém a encontrar a resposta mais rapidamente do que eu :-)

Código no Style.css

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

Se por algum motivo você não puder instalar o pacote, jogue o npm. Você sempre pode editar index.html e adicionar CSS impressionante de fontes na cabeça. E então apenas usei no projeto.

Para o webpack2, use:

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

ao invés de file-loader?name=/assets/fonts/[name].[ext]

Para Angular 9 usando ng:

ng add @fortawesome/[email protected]

Veja aqui mais informações

Agora, existem algumas maneiras de instalar o fontAwesome na CLI Angular:

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

Referência aqui: https://github.com/FortAwesome/angular-fontawesome