Estoy usando Angular 2+ y Angular CLI.

¿Cómo agrego font-awesome a mi proyecto?

Después del lanzamiento final de Angular 2.0, la estructura del proyecto CLI Angular2 ha cambiado : no necesita ningún archivo de proveedor, ni system.js, solo paquete web. Tu también:

1. npm install font-awesome --save

2. En el angular-cli.jsonarchivo, ubique la styles[]matriz y agregue el directorio de referencias font-awesome aquí, como a continuación:

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

   En versiones más recientes de Angular, use el angular.jsonarchivo en su lugar, sin el ../. Por ejemplo, use "node_modules/font-awesome/css/font-awesome.css".

3. Coloque algunos iconos de fuente impresionante en cualquier archivo html que desee:

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

4. Detenga la aplicación Ctrl+ y cluego vuelva a ejecutar la aplicación usando ng serveporque los observadores son solo para la carpeta src y no se observa angular-cli.json en busca de cambios.

5. ¡Disfruta de tus increíbles iconos!

Si está utilizando SASS, puede instalarlo a través de npm

npm install font-awesome --save

e impórtalo en tu /src/styles.scsscon:

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

Consejo: siempre que sea posible, evite meterse con la angular-cliinfraestructura. ;)

La respuesta principal está un poco desactualizada y hay una manera un poco más fácil.

1. instalar a través de npm

   npm install font-awesome --save

2. en tu style.css:

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

   o en tu style.scss:

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

   Editar: como se indica en los comentarios, la línea para las fuentes debe cambiarse en las versiones más recientes a$fa-font-path: "../../../node_modules/font-awesome/fonts";

usando el ~will hará que sass lo mire node_module. Es mejor hacerlo de esta manera que con la ruta relativa. La razón es que si carga un componente en npm e importa font-awesome dentro del componente scss, funcionará correctamente con ~ y no con la ruta relativa que será incorrecta en ese punto.

Este método funciona para cualquier módulo npm que contenga css. Funciona también para scss. Sin embargo, si está importando CSS a sus styles.scss, no funcionará (y tal vez viceversa). Aquí esta el porque

Hay 3 partes para usar Font-Awesome en proyectos angulares

1. Instalación
2. Estilo (CSS / SCSS)
3. Uso en angular

Instalación

Instalar desde NPM y guardar en su package.json

npm install --save font-awesome

Estilo si usa CSS

Insertar en tu style.css

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

Estilo si usa SCSS

Insertar en su style.scss

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

Uso con angular simple 2.4+ 4+

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

Uso con material angular

En su app.module.ts modifique el constructor para usar el MdIconRegistry

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

y agregar MatIconModulea sus @NgModuleimportaciones

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

}

Ahora en cualquier archivo de plantilla que ahora puede hacer

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

ACTUALIZACIÓN Febrero de 2020: el paquete
fortawesome ahora es compatible, ng addpero solo está disponible para angular 9 :

ng add @fortawesome/angular-fontawesome

ACTUALIZACIÓN 8 oct 2019:

Puede usar un nuevo paquete https://www.npmjs.com/package/@fortawesome/angular-fontawesome

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

Añadir FontAwesomeModulea las importaciones en 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 { }

Ate el icono a la propiedad en su 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 el icono en la plantilla src/app/app.component.html:

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

RESPUESTA ORIGINAL:

Opción 1:

Puedes usar el módulo npm angular-font-awesome

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

Importar el módulo:

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

Si está utilizando CLI angular, agregue el CSS de fuente impresionante a los estilos dentro de angular-cli.json

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

NOTA: Si usa el preprocesador SCSS, simplemente cambie css por scss

Ejemplo de uso:

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

Optoína 2:

Hay una historia oficial para eso ahora

Instale la biblioteca font-awesome y agregue la dependencia a package.json

npm install --save font-awesome

Usando CSS

Para agregar iconos CSS de Font Awesome a su aplicación ...

// in .angular-cli.json

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

Usando SASS

Crea un archivo vacío _variables.scssen src/.

Agregue lo siguiente a _variables.scss:

$fa-font-path : '../node_modules/font-awesome/fonts'; En styles.scssagregar lo siguiente:

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

Prueba

Ejecute ng serve para ejecutar su aplicación en modo de desarrollo y navegue a http: // localhost: 4200 .

Para verificar que Font Awesome se haya configurado correctamente, cambie src/app/app.component.htmla lo siguiente ...

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

Después de guardar este archivo, regrese al navegador para ver el ícono de Font Awesome junto al título de la aplicación.

También hay una pregunta relacionada: CLI angular genera los archivos de fuentes impresionantes en la raíz dist, ya que, por defecto, el cli angular envía las fuentes a la distraíz, lo que por cierto no es un problema en absoluto.

Con Angular2RC5 yangular-cli 1.0.0-beta.11-webpack.8 puede lograr esto con las importaciones de CSS.

Simplemente instale la fuente impresionante:

npm install font-awesome --save

y luego importe font-awesome en uno de sus archivos de estilo configurados:

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

(los archivos de estilo están configurados en angular-cli.json)

Pensé en agregar mi resolución a esto ya que font-awesome ahora está instalado de manera diferente de acuerdo con su documentación.

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

Por qué es increíble ahora se me escapa, pero pensé que me quedaría con la versión más reciente en lugar de recurrir a la antigua fuente impresionante.

Luego lo importé a mi 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 esto ayude

Muchas instrucciones anteriores funcionan, sugiero mirarlas. Sin embargo, algo a tener en cuenta:

El uso <i class="fas fa-coffee"></i> no funcionó en mi proyecto (proyecto de práctica nueva de solo una semana) después de la instalación y el ícono de muestra aquí también se copió al portapapeles de Font Awesome durante la semana pasada.

Esto <i class="fa fa-coffee"></i> hace el trabajo . Si después de instalar Font Awesome en su proyecto aún no funciona, le sugiero que verifique la clase en su icono para eliminar la 's' para ver si funciona.

Hay muchas buenas respuestas aquí. Pero si probaste todos ellos y aún obtienes cuadrados en lugar de iconos impresionantes, revisa tus reglas CSS. En mi caso tenía la siguiente regla:

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

Y anula las fuentes fontawesome. Simplemente reemplazando el *selector para bodyresolver mi problema:

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

Para Angular 6,

primero npm install font-awesome --save

Añadir node_modules/font-awesome/css/font-awesome.cssa angular.json .

Recuerde no agregar puntos delante del node_modules/.

Esta publicación describe cómo integrar Fontawesome 5 en Angular 6 (Angular 5 y versiones anteriores también funcionarán, pero luego debe ajustar mis escritos)

Opción 1: agregar los archivos css

Pro: se incluirán todos los íconos

Contra: se incluirán todos los íconos (mayor tamaño de la aplicación porque todas las fuentes están incluidas)

Agregue el siguiente paquete:

npm install @fortawesome/fontawesome-free-webfonts

Luego agregue las siguientes líneas a su 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"
],
...    
}

Opción 2: paquete angular

Pro: tamaño de aplicación más pequeño

Contra: debes incluir cada ícono que quieras usar por separado

Utilice el paquete angular FontAwesome 5:

npm install @fortawesome/angular-fontawesome

Simplemente siga su documentación para agregar los íconos. Usan los iconos svg, por lo que solo tiene que agregar los iconos / svgs, realmente los usa.

Después de experimentar un poco, logré que funcionara lo siguiente:

1. Instalar con npm:

   npm install font-awesome --save
   

2. agregar al archivo angular-cli-build.js :

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

3. agregar a index.html

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

La clave era incluir los tipos de archivo de fuente en el archivo angular-cli-build.js

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

La respuesta aceptada está desactualizada.

Para angular 9 y Fontawesome 5

1. Instalar FontAwesome

   npm install @ fortawesome / fontawesome-free --save

2. Regístralo en angular.json bajo estilos

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

3. Úselo en su aplicación

Editar: estoy usando angular ^ 4.0.0 y Electron ^ 1.4.3

Si tiene problemas con ElectronJS o similar y tiene una especie de error 404, una posible solución es utilizarlo webpack.config.jsagregando (y suponiendo que tiene instalado el módulo de nodo de fuente impresionante a través de npm o en el archivo package.json) :

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

Tenga en cuenta que la configuración del paquete web que estoy usando tiene src/app/distcomo salida y, en dist, el assetspaquete web crea una carpeta:

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

Entonces, básicamente, lo que está sucediendo actualmente es:

• Webpack está copiando la carpeta de fuentes en la carpeta de activos de desarrollo.
• Webpack está copiando la carpeta de distactivos de desarrollo en la carpeta de activos

Ahora, cuando finalice el proceso de compilación, la aplicación deberá buscar el .scssarchivo y la carpeta que contiene los iconos, resolviéndolos correctamente. Para resolverlos, he usado esto en mi configuración de paquete web:

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

Por último, en el .scssarchivo, estoy importando el .scss font-impresionante y define la trayectoria de los tipos de letra, que es, de nuevo, dist/assets/font-awesome/fonts. El camino esdist porque en mi webpack.config el output.path está configurado comohelpers.root('src/app/dist');

Entonces, en app.scss:

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

Tenga en cuenta que, de esta manera, definirá la ruta de la fuente (utilizada más adelante en el archivo .scss) e importará el archivo .scss ~font-awesomepara resolver la ruta de la fuente impresionante node_modules.

Esto es bastante complicado, pero es la única forma en que he encontrado para solucionar el problema de error 404 con Electron.js

A partir de https://github.com/AngularClass/angular-starter , después de haber probado muchas combinaciones de configuración diferentes, esto es lo que hice para que funcione con AoT.

Como ya dije muchas veces, en mi app.component.scss:

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

Luego, en webpack.config.js (en realidad webpack.commong.js en el paquete de inicio):

En la sección de complementos:

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

En la sección de reglas:

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

Perdí varias horas tratando de obtener la última versión de FontAwesome 5.2.0 trabajando con AngularCLI 6.0.3 y Material Design. Seguí las instrucciones de instalación de npm fuera del sitio web FontAwesome

Sus últimos documentos le indican que realice la instalación utilizando lo siguiente:

npm install @fortawesome/fontawesome-free

Después de perder varias horas, finalmente lo desinstalé e instalé Font Awesome usando el siguiente comando (esto instala FontAwesome v4.7.0):

npm install font-awesome --save

Ahora está funcionando bien usando:

$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 le ofrece scalableiconos vectoriales que se pueden personalizar al instante: tamaño, color, sombra y cualquier cosa que se pueda hacer con el poder de CSS.

Cree un nuevo proyecto y navegue hacia el proyecto.

ng new navaApp
cd navaApp

Instale la biblioteca font-awesome y agregue la dependencia a package.json.

npm install --save font-awesome

Usando CSS

Para agregar iconos CSS de Font Awesome a su aplicación ...

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

Usando SASS

Crea un nuevo proyecto con SASS:

ng new cli-app --style=scss

Para usar con proyectos existentes con CSS:

Cambiar el nombre src/styles.cssa src/styles.scss Cambiar angular.jsonpara buscar en styles.scsslugar de css:

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

Asegúrate de cambiar styles.cssa styles.scss.

Crea un archivo vacío _variables.scssensrc/.

Agregue lo siguiente a _variables.scss:

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

En styles.scssagregar lo siguiente:

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

Puede usar el paquete Angular Font Awesome

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

y luego importar en su módulo:

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

e importar el estilo en el archivo angular-cli:

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

ver más detalles sobre el paquete en la biblioteca npm:

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

y luego úsalo así:

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

Para usar Font Awesome 5 en su proyecto Angular, inserte el siguiente código en el archivo src / index.html.

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

¡Buena suerte!

Para fontawesome 5.x + la forma más sencilla sería la siguiente,

instalar usando el paquete npm: npm install --save @fortawesome/fontawesome-free

En su styles.scssarchivo incluya:

$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: si tiene un _variables.scssarchivo, entonces es más apropiado incluirlo $fa-font-pathdentro y no en el styles.scssarchivo.

Usando MENOS (no SCSS) y Angular 2.4.0 y Webpack estándar (no CLI angular, lo siguiente funcionó para mí:

npm install --save font-awesome

y (en mi app.component.less):

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

y, por supuesto, puede necesitar este fragmento obvio y altamente intuitivo (en module.loaders en webpack.conf)

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

El cargador está ahí para corregir los errores de paquete web del tipo

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

y la expresión regular coincide con esas referencias svg (con o sin especificación de versión). Dependiendo de la configuración de su paquete web, es posible que no lo necesite o que necesite algo más.

Agréguelo en su package.json como "devDependencies" font-awesome: "número de versión"

Vaya al símbolo del sistema, escriba el comando npm que configuró.

Quería usar Font Awesome 5+ y la mayoría de las respuestas se centran en versiones anteriores

Para el nuevo Font Awesome 5+, el proyecto angular aún no se ha lanzado, por lo que si desea hacer uso de los ejemplos mencionados en el cajero automático de Font Awesome, debe usar una solución alternativa. (especialmente las clases fas, far en lugar de la clase fa)

Acabo de importar el cdn a Font Awesome 5 en mi styles.css. Acabo de agregar esto en caso de que ayude a alguien a encontrar la respuesta más rápido que yo :-)

Código en Style.css

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

Si por alguna razón no puedes instalar el paquete, lanza npm. Siempre puede editar index.html y agregar fuentes CSS increíbles en la cabeza. Y luego lo usé en el proyecto.

Para el uso de webpack2:

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

en vez de file-loader?name=/assets/fonts/[name].[ext]

Para Angular 9 usando ng:

ng add @fortawesome/[email protected]

Vea aquí para más información

Ahora hay algunas formas de instalar fontAwesome en 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

Referencia aquí: https://github.com/FortAwesome/angular-fontawesome