Como adicionar font-awesome ao projeto Angular 2 + CLI


269

Estou usando Angular 2+ e Angular CLI.

Como adiciono o font-awesome ao meu projeto?


Eu tenho o mesmo problema. É como se os arquivos fossem ignorados pela CLI e não fossem copiados no modo dev. Dito isto, o arquivo está lá no diretório / dist, quando uma compilação é concluída.
Thibs 08/08/19

Eu não entendo, por que precisamos adicionar fonte impressionante via npm, não poderíamos simplesmente vincular a fonte incrível de cdn? o que estou perdendo?
Rosdi Kasim

4
@RosdiKasim, você pode criar um link para o CDN do seu arquivo de índice. Há casos em que você não gostaria. Projetos corporativos podem não permitir fontes externas; CDN pode cair; A atualização da CLI pode precisar atualizar o arquivo index.html, para garantir que ele não substitua os links atuais; font-awesome pode ser uma dependência para outra lib npm; você deseja bloquear uma fonte incrível para uma determinada versão; seu processo de construção poderia depender dele ... (e assim por diante, você começa a idéia) No final, até como quer trazê-lo.
Nik

Ok obrigado ... parece que não estou perdendo muito ... só quero ter certeza de que entendo os prós e contras ... aplausos.
Rosdi Kasim

Consulte também a documentação oficial para adicionar JS ou CSS: angular.io/guide/…
Guillaume Husta

Respostas:


469

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!

3
Você pode explicar o que addonsfaz? Vejo que está documentado como "Configuração reservada para complementos de terceiros instalados". , mas não consigo encontrar nenhuma manipulação no código da CLI angular .
Arjan

1
Infelizmente @Arjan & @bjorkblom - não consegui encontrar nenhum documento referente a esse arquivo addons... Isso está em minha atenção há um tempo .. Atualizarei minha resposta assim que encontrar algo.
AIon

3
@Rosdi Kasim Jan - você poderia fazer isso - mas em aplicativos maiores geralmente você não usa cdns. Primeiro, porque alguém pode invadir e comprometer seu aplicativo indiretamente. Segundo, porque não é apenas impressionante para fontes - você precisa de outras bibliotecas externas, como bootstrap, bibliotecas dnd etc. - se você tiver uma solicitação http separada - para um CDN - para cada uma delas, é um desempenho ruim. O que você faz é fazer o download com o npm - e agrupar todo o seu código em um único arquivo usando o webpack ou algo assim, reduzi-lo e aumentá-lo - e é assim que você pode executar seu aplicativo no celular - onde os recursos são baixos.
aion

12
Nota: a addonspropriedade não é mais usada. É suficiente incluir o font-awesome.cssarquivo em styles. Veja github.com/angular/angular-cli/blob/master/docs/documentation/…
0x2D9A3

2
Update: Com Angular 6.0.0 o nome do arquivo é alterado de .angular-cli.json para angular.json
Manoj Negi

123

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 melhor solução imo. Funciona como um encanto depois de um ng build && ng serve -w. É mais fácil e mais seguro para deixar fontes SCSS estilo de construção + do que tentar mudar infra angular-cli;)
soywod

33
Melhor resposta. Pequena melhoria: o uso ~, em vez de ../node_modules/, por exemplo@import '~font-awesome/scss/font-awesome.scss';
m4js7er

5
não está trabalhando para mim com angular4 e scss. Eu posso ver o css mas não o ícone
Aniruddha Das

Tenho mesmo problema em Angular4
Francesco

2
Utilizar a .cssimportação de ~font-awesome/css/font-awesome.min.csse funciona bem (default fa-font-path) para angular4 / cli
Tim

67

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ê


Ainda está recebendo o mesmo erro depois de seguir suas etapas.
indra257

Falha em arquivos .ttf carga, WOFF e woff2
indra257

Estou usando o cli 1.0. Apenas para checar, criei um aplicativo de exemplo e apenas carreguei fontes incríveis e implantei o aplicativo. ainda está recebendo esse erro.
precisa saber é

@ indra257 Eu tive que adicionar $ fa-font-path: "../node_modules/font-awesome/fonts"; em styles.scss para instruções acima para o trabalho
Todilo

Eu não tenho o arquivo style.scss no meu projeto. Preciso seguir outras etapas para adicionar o arquivo styles.scss.
precisa saber é o seguinte

51

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>

1
Você tem algum problema com o empacotamento da fonte-awesome. Eu acho que a questão principal é empacotar quando usamos o Cli. arquivos tff, woff, woff2 não estão sendo agrupados.
precisa saber é o seguinte

Acabei de criar um aplicativo de exemplo e segui suas etapas. Empacotou o aplicativo usando o ng build. No console, ainda estou vendo Não é possível carregar o erro dos arquivos woff e woff2
#

1
Está correto. Funciona perfeitamente bem com o ng serve. Com o ng build, ele funciona bem, mas o console mostra que não é possível carregar alguns arquivos woff, woff2.
indra257

Não vejo o mesmo problema, então espero que algo esteja errado com seus arquivos de configuração / configuração. Sugiro que você replique seu problema com um caso de teste e crie uma nova pergunta com ele.
precisa saber é o seguinte

Eu criei um aplicativo vazio usando angular-cli e adicionei uma fonte incrível. Quais arquivos você quer me para verificar ..
indra257

26

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.


Ao usar a opção 1, remova-o ../da frente de"../node_modules/font-awesome/css/font-awesome.css"
Alf Moh

POR QUE devo usar o novo pacote angular? Parece muito mais PITA importá-los individualmente.
MDave 27/01

1
Quero dizer que npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-iconsna sua resposta não é igual à npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/angular-fontawesomedos documentos, desculpas se estiver faltando algo óbvio.
User632716

1
@ User632716 OK acabou de adicionar o pacote em falta ao comando npm install.
kuncevic.dev

1
Muito obrigado ... Eu estava procurando por uma fonte incrível do Angular 9 +. ATUALIZAÇÃO Fevereiro de 2020 é a coisa mais útil após desperdiçar 1 dia.
Tejashree

15

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)


1
Parece que ele está tentando importar, mas está recebendo um erro zone.js:101 - GET http://localhost:4200/node_modules/font-awesome/css/font-awesome.css 404 (Not Found) ... o arquivo realmente existe, mas parece que localhost:4200não está sendo executado a partir da raiz desta pasta ... Como empacotar fontes incríveis para localhost:4200a pasta raiz ...
microchip78

Também estou usando angular-cli@1.0.0-beta.11-webpack.2e configuração arquivo de estilo em angular-cli.jsonnão está funcionando ...
microchip78

1
hmm isso é estranho, talvez atualizar para 1.0.0-beta.11-webpack.8?
shusson 8/09/16

13

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


5

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.


4

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;
}

Obrigado tanto que fez isso por mim concedido agora eu tenho que descobrir como obter as fontes trabalhando desde a fazê-lo em um seletor corpo não trabalho para mim
jgerstle

@jgerstle, especificar a fonte em bodydeve funcionar, certifique-se de que você não substitua a fonte em outro lugar, pode estar substituindo-a h*ou por ptags como normalmente fazemos.
Commercial Suicide

Sim, algo parece estar sobrescrevendo, mas eu não acho que seja o meu próprio código. Acho que podem ser apenas os padrões do chrome, mas é estranho porque eu o defini como! Important e ainda parece ser substituído. Vou ter que investigar melhor.
jgerstle

Eu tenho que usar: não (.fa) para manter o mesmo seletor *, mas não atingir qualquer coisa usando font-incrível
jgerstle

4

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


2
Acabo com apenas quadrados para as imagens quando faço isso.
Gargoyle

mesmo aqui, como você removeu os quadrados? @Gargoyle
AngularM

4

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.


Observe que seus caminhos começam com @fortawesome. Observe a palavra 'FORT', não 'FONT'. Minha instalação também está fazendo isso. Alguém sabe o que há com isso?
Helzgate

Não importa, aparentemente eles têm alguma estrutura de renomeação em andamento. Veja esta publicação no Github
Helzgate

@Aniketkale o que não está funcionando? Eu apresentei duas opções
Paul

3

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)


1
apenas um heads-up não existe angular-cli-build.jsna última Webpack ramo
shusson

Além disso, vendorNpmFiles não foi encontrado no código atual da Angular-CLI . Vendo a resposta aceita de Alon, acho que isso está desatualizado?
Arjan

1
@ Arjan sim, esta resposta está desatualizada ... era para a CLI pré webpack. A resposta de Alon é a resposta aceita
Nik

3

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


2

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


2

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]'
}

2

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>

2

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

É uma boa pergunta. Sempre foi uma pergunta para mim #
Seyed Ali Mahmoody 21/09/19

2

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>


2

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!


2

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.


1

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.


1

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.


Você desejará adicionar fontes impressionantes às suas 'dependências', não 'dev-dependencies', pois será necessário na sua versão final. Além disso, as instruções acima não respondem como o projeto Angular irá buscá-lo quando forem adicionados ao arquivo package.json.
Nik

1

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

Eu tentei isso. Funciona bem no local, mas quando tento construí-lo, os ícones desaparecem.
Piyush Choudhary

1

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.


1

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]



1

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.