Cómo agregar font-awesome al proyecto Angular 2 + CLI

Estoy usando Angular 2+ y CLI angular.

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

Después de la versión final de Angular 2.0, se modificó la estructura del proyecto de CLI de Angular2 ; no es necesario ningún archivo de proveedor, ni ningún paquete de sistema .js. Tu también:

  1. npm install font-awesome --save

  2. En el archivo angular-cli.json, busque la matriz de styles[] y agregue el directorio de referencias de fonts increíbles aquí, como a continuación:

      "aplicaciones": [
               {
                  "raíz": "src",
                  "outDir": "dist",
                  ....
                  "estilos": [
                     "styles.css",
                     "../node_modules/bootstrap/dist/css/bootstrap.css",
                     "../node_modules/font-awesome/css/font-awesome.css" // -all webpack construirá automáticamente un elemento link css fuera de esto !?
                  ],
                  ...
              }
            ]
    
     ], 
  3. Coloque algunos íconos increíbles en cualquier archivo html que desee:

      
  4. Detenga la aplicación Ctrl + c y luego vuelva a ejecutar la aplicación utilizando ng serve porque los vigilantes son solo para la carpeta src y angular-cli.json no se observa para los cambios.

  5. ¡Disfruta tus increíbles icons!

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

 npm install font-awesome --save 

e importarlo en su /src/styles.scss con:

 $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 angular-cli infraestructura angular-cli . 😉

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 su style.css :

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

    o en su 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 fonts se debe cambiar en las versiones más recientes a $fa-font-path: "../../../node_modules/font-awesome/fonts";

usar ~ hará que sass busque en 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 para scss también. Sin embargo, si está importando CSS a su styles.scss, no funcionará (y viceversa). Aquí está el porqué

El uso de Font-Awesome en proyectos angulares tiene 3 partes

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

Instalación

Instalar desde NPM y guardarlo en su paquete. Json

 npm install --save font-awesome 

Estilo si usa CSS

Inserta en tu style.css

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

Estilo si usa SCSS

Inserta en tu style.scss

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

Uso con Angular sencillo 2.4+ 4+

  

Uso con material angular

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

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

y agrega MatIconModule a tus importaciones de @NgModule

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

}


Ahora en cualquier archivo de plantilla que ahora puede hacer

  

Con Angular2 RC5 y angular-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 )

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 Angular CLI, agregue la fuente de CSS impresionante a los estilos dentro de la angular-cli.json

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

NOTA: Si usa el preprocesador SCSS solo cambie el CSS para scss

Ejemplo de uso:

  

Optoin 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 icons Font Awesome CSS a su aplicación …

 // in .angular-cli.json "styles": [ "styles.css", "../node_modules/font-awesome/css/font-awesome.css" ] 

Usando SASS

Cree un archivo vacío _variables.scss en src/ .

Agregue lo siguiente a _variables.scss :

$fa-font-path : '../node_modules/font-awesome/fonts'; En styles.scss agregue 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 vaya a http: // localhost: 4200 .

Para verificar que Font Awesome se haya configurado correctamente, cambie src / app / app.component.html a la siguiente …

 

{{title}}

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

También hay una pregunta relacionada. Angular CLI genera los archivos de fuente increíbles, la raíz de dist ya que de forma predeterminada angular cli envía las fonts a la raíz de dist , que por cierto no es un problema.

Después de un poco de experimentación, conseguí 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

      

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

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

Editar: estoy usando angular ^ 4.0.0 y Electron ^ 1.4.3

Si tiene problemas con ElectronJS o similar y tiene un tipo de error 404, una posible solución alternativa es actualizar su webpack.config.js , agregando (y suponiendo que tiene el módulo de nodo awesome-font instalado 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 de webpack que estoy usando tiene src/app/dist como salida y, en dist, se crea una carpeta de assets por 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' }, 

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

  • Webpack está copiando la carpeta de fonts a la carpeta dev assets.
  • Webpack está copiando la carpeta dev assets a la carpeta dist assets

Ahora, cuando finalice el proceso de comstackción, la aplicación deberá buscar el archivo .scss y la carpeta que contiene los íconos, y resolverlos adecuadamente. Para resolverlos, lo he usado 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]' }, 

Finalmente, en el archivo .scss , estoy importando el .scss fuente-impresionante y definiendo la ruta de las fonts, que es, de nuevo, dist/assets/font-awesome/fonts . La ruta es dist porque en mi webpack.config el output.path se establece como helpers.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 usando ~font-awesome para resolver la ruta de font-awesome en node_modules .

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

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

Hay muchas buenas respuestas aquí. Pero si has probado todos y sigues recibiendo cuadrados en lugar de icons fontañosos, verifica las reglas de tus CSS. En mi caso, tenía la siguiente regla:

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

Y anula las fonts fontawesome. El solo hecho de reemplazar * selector al body resolvió mi problema:

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

Para Angular 6,

First npm install font-awesome --save

Agregue node_modules/font-awesome/css/font-awesome.css awesome.css a angular.json .

Recuerde no agregar ningún punto delante de los node_modules/ .

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

Opción 1: Agregue los archivos css

Pro: se incluirán todos los icons

Contra: se incluirán todos los icons (tamaño de la aplicación más grande porque todas las fonts 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: debe incluir todos los icons que desee usar por separado

Utilice el paquete Angular FontAwesome 5:

 npm install @fortawesome/angular-fontawesome 

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

Usando LESS (no SCSS) y Angular 2.4.0 y Webpack estándar (no Angular CLI, 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á allí para corregir los errores del 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.

Quería utilizar 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 utilizar los ejemplos mencionados en la impresionante atmósfera del sitio web atm, debe utilizar una solución alternativa. (especialmente el fas, clases lejos 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 throw npm. Siempre puede editar index.html y agregar fuente de CSS impresionante en la cabeza. Y luego solo 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 lugar de file-loader?name=/assets/fonts/[name].[ext]

Perdí varias horas intentando que la última versión de FontAwesome 5.2.0 funcionara 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 usando lo siguiente:

 npm install @fortawesome/fontawesome-free 

Después de perder varias horas, finalmente lo desinstalé e instalé la fuente impresionante 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";  

Agréguelo en su paquete. Json como “devDependencies” font-awesome: “número de versión”

Vaya a Símbolo del sistema de comando tipo npm que configuró.