Estou usando Angular 2+ e Angular CLI.
Como adiciono o font-awesome ao meu projeto?
Estou usando Angular 2+ e Angular CLI.
Como adiciono o font-awesome ao meu projeto?
Respostas:
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:
npm install font-awesome --save
No angular-cli.json
arquivo, 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.json
arquivo, sem o../
. Por exemplo, use"node_modules/font-awesome/css/font-awesome.css"
.
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>
Pare o aplicativo Ctrl+ ce execute novamente o aplicativo usando ng serve
porque os observadores são apenas para a pasta src e angular-cli.json não é observado para alterações.
addons
faz? 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 .
addons
... Isso está em minha atenção há um tempo .. Atualizarei minha resposta assim que encontrar algo.
addons
propriedade não é mais usada. É suficiente incluir o font-awesome.css
arquivo em styles
. Veja github.com/angular/angular-cli/blob/master/docs/documentation/…
Se você estiver usando o SASS, basta instalá-lo via npm
npm install font-awesome --save
e importe-o no seu /src/styles.scss
com:
$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-cli
infraestrutura. ;)
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;)
~
, em vez de ../node_modules/
, por exemplo@import '~font-awesome/scss/font-awesome.scss';
.css
importação de ~font-awesome/css/font-awesome.min.css
e funciona bem (default fa-font-path) para angular4 / cli
A resposta principal está um pouco desatualizada e existe uma maneira um pouco mais fácil.
instalar através do npm
npm install font-awesome --save
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
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 @NgModule
importaçõ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 add
mas 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:
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>
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.scss
nosrc/
.
Adicione o seguinte a _variables.scss
:
$fa-font-path : '../node_modules/font-awesome/fonts';
Em styles.scss
adicionar 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.html
para 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 dist
raiz, o que, a propósito, não é um problema.
../
da frente de"../node_modules/font-awesome/css/font-awesome.css"
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
na sua resposta não é igual à npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/angular-fontawesome
dos documentos, desculpas se estiver faltando algo óbvio.
Com o Angular2
RC5 e angular-cli 1.0.0-beta.11-webpack.8
você 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
)
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:4200
não está sendo executado a partir da raiz desta pasta ... Como empacotar fontes incríveis para localhost:4200
a pasta raiz ...
angular-cli@1.0.0-beta.11-webpack.2
e configuração arquivo de estilo em angular-cli.json
não está funcionando ...
1.0.0-beta.11-webpack.8
?
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 body
resolver o meu problema:
body {
font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}
body
deve funcionar, certifique-se de que você não substitua a fonte em outro lugar, pode estar substituindo-a h*
ou por p
tags como normalmente fazemos.
Para Angular 6,
Primeiro npm install font-awesome --save
Adicionar node_modules/font-awesome/css/font-awesome.css
a 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:
Instale com o npm:
npm install font-awesome --save
adicione ao arquivo angular-cli-build.js :
vendorNpmFiles : [
font-awesome/**/*.+(css|css.map|otf|eot|svg|ttf|woff|woff2)',
]
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)
angular-cli-build.js
na última Webpack ramo
A resposta aceita está desatualizada.
Para angular 9 e Fontawesome 5
Instalar FontAwesome
npm install @ fortawesome / fontawesome-free --save
Registre-o no angular.json em styles
"node_modules/@fortawesome/fontawesome-free/css/all.min.css"
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/dist
como saída e, em dist, uma assets
pasta é 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 é:
dist
pasta assetsAgora, quando o processo de compilação for concluído, o aplicativo precisará procurar o .scss
arquivo 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 .scss
arquivo, estou importando o .scss de fonte impressionante e definindo o caminho das fontes, que é, novamente dist/assets/font-awesome/fonts
,. O caminho é dist
porque 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-awesome
para 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.css
para src/styles.scss
Alterar angular.json
para procurar em styles.scss
vez de css
:
// in angular.json
"build": {
"options": {
"styles": [
"src/styles.scss"
],
}
}
Certifique-se de mudar styles.css
para styles.scss
.
Crie um arquivo vazio _variables.scss
nosrc/
.
Adicione o seguinte a _variables.scss
:
$fa-font-path : '../node_modules/font-awesome/fonts';
Em styles.scss
adicionar 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:
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.scss
arquivo, 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.scss
arquivo, é mais apropriado incluir o $fa-font-path
interior e não o styles.scss
arquivo.
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.
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