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


269

Estoy usando Angular 2+ y Angular CLI.

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


Tengo el mismo problema. Es como si la CLI ignorara los archivos y no se copiaran en modo dev. Dicho esto, el archivo está allí en el directorio / dist, cuando se realiza una compilación.
Thibs

No entiendo, ¿por qué necesitamos agregar font-awesome a través de npm, no podríamos simplemente vincularnos a font-awesome cdn? ¿Qué me estoy perdiendo?
Rosdi Kasim el

44
@RosdiKasim puede vincular al CDN desde su archivo de índice. Sin embargo, hay casos en los que no querrías hacerlo. Los proyectos corporativos pueden no permitir fuentes externas; CDN podría caer; La actualización de la CLI puede necesitar actualizar el archivo index.html, por lo que deberá asegurarse de que no sobrescriba sus enlaces actuales; font-awesome podría ser una dependencia para otra npm lib; desea bloquear font-awesome en una versión determinada; su proceso de compilación podría depender de él ... (y así sucesivamente, se entiende la idea) Al final, hasta cómo quiere traerlo.
Nik

Ok, gracias ... parece que no me falta mucho ... Solo quiero asegurarme de que entiendo los pros y los contras ... aplausos.
Rosdi Kasim

Consulte también la documentación oficial para agregar JS o CSS: angular.io/guide/…
Guillaume Husta

Respuestas:


469

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!

3
¿Puedes explicar qué addonshace? Veo que está documentado como "Configuración reservada para complementos de terceros instalados". , pero no puedo encontrar ningún manejo en el código Angular-CLI .
Arjan

1
Desafortunadamente @Arjan & @bjorkblom - No pude encontrar ningún documento sobre esto addonsarchivado ... Esto ha estado en mi atención por un tiempo ahora ... Actualizaré mi respuesta una vez que encuentre algo.
AIon

3
@Rosdi Kasim Jan, podría hacerlo, pero en aplicaciones más grandes generalmente no usa cdns. Primero porque alguien puede hackearlos y comprometer tu aplicación indirectamente. En segundo lugar, porque no se trata solo de fuentes impresionantes: necesita otras bibliotecas externas como bootstrap, dnd, etc. En cambio, lo que debe hacer es descargar con npm, y agruparlo con todo su código en un solo archivo usando un paquete web o algo así, minimizar y uglificar eso, y así es como puede ejecutar su aplicación en dispositivos móviles, donde los recursos son bajos.
AIon

12
Nota: la addonspropiedad ya no se usa. Es suficiente incluir el font-awesome.cssarchivo debajo styles. Ver github.com/angular/angular-cli/blob/master/docs/documentation/…
0x2D9A3

2
Actualización: Con Angular 6.0.0, el nombre del archivo cambia de .angular-cli.json a angular.json
Manoj Negi

123

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. ;)


Es la mejor solución de la OMI. Funciona como un encanto después de un ng build && ng serve -w. Es más fácil y seguro dejar que scss construya estilo + fuentes que tratar de cambiar angular-cli infra;)
soywod

33
La mejor respuesta. Mejora menor: uso en ~lugar de ../node_modules/, por ejemplo@import '~font-awesome/scss/font-awesome.scss';
m4js7er

55
no funciona para mí con angular4 y scss. Puedo ver el CSS pero no el icono
Aniruddha Das

Tengo el mismo problema en Angular4
Francesco

2
Use la .cssimportación desde ~font-awesome/css/font-awesome.min.cssy funciona bien (ruta de fuente fa predeterminada) para angular4 / cli
Tim

67

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


Sigue recibiendo el mismo error después de seguir sus pasos.
indra257

Error al cargar archivos .ttf, woff y woff2
indra257

Estoy usando cli 1.0. Solo para verificar, creé una aplicación de muestra y simplemente cargué font-awesome e implementé la aplicación. Todavía recibo ese error.
indra257

@ indra257 Tuve que agregar $ fa-font-path: "../node_modules/font-awesome/fonts"; en styles.scss para las instrucciones anteriores para trabajar
Todilo

No tengo el archivo style.scss en mi proyecto. ¿Debo seguir otros pasos después de agregar el archivo styles.scss?
indra257

51

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>

1
¿Tiene algún problema al agrupar el font-awesome? Creo que el problema principal es agrupar cuando usamos Cli. Los archivos tff, woff, woff2 no ​​se agrupan.
indra257

Acabo de crear una aplicación de muestra y seguí tus pasos. Paquete de la aplicación usando ng build. En la consola todavía veo No se puede cargar el error de archivos woff y woff2
indra257

1
Eso es correcto. Funciona perfectamente bien con ng serve. Con ng build, funciona bien, pero la consola muestra que no puede cargar algunos archivos woff, woff2.
indra257

No veo el mismo problema, así que espero que algo esté mal con sus archivos de compilación / configuración. Le sugiero que replique su problema con un caso de prueba y cree una nueva pregunta con él.
muttonUp

Creé una aplicación vacía usando angular-cli y agregué font-awesome. ¿Qué archivos quieres que revise?
indra257

26

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.


Cuando se utiliza la opción 1, retirar ../del frente"../node_modules/font-awesome/css/font-awesome.css"
Alf Moh

¿POR QUÉ se supone que debo usar el nuevo paquete angular? Parece mucho más PITA importarlos individualmente.
MDave

1
Quiero decir que npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-iconsen su respuesta no es igual a npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/angular-fontawesomeen los documentos, disculpas si me falta algo obvio.
Usuario632716

1
@ User632716 OK acaba de agregar el paquete que falta al comando de instalación npm.
kuncevic.dev

1
Muchas gracias ... Estaba buscando la fuente Angular 9 + increíble. ACTUALIZACIÓN Febrero de 2020 es lo más útil después de perder 1 día.
Tejashree

15

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)


1
Parece que está intentando importar pero aparece un error zone.js:101 - GET http://localhost:4200/node_modules/font-awesome/css/font-awesome.css 404 (Not Found) ... el archivo realmente existe pero parece que localhost:4200no se está ejecutando desde la raíz de esta carpeta ... Cómo empaquetar font-awesome en localhost:4200la carpeta raíz ...
microchip78

También estoy usando angular-cli@1.0.0-beta.11-webpack.2y la configuración del archivo de estilo en angular-cli.jsonno funciona ...
microchip78

1
hmm eso es extraño, tal vez actualizar a 1.0.0-beta.11-webpack.8?
shusson

13

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


5

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.


4

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

Muchas gracias por haberlo hecho, ahora tengo que descubrir cómo hacer que las fuentes funcionen, ya que hacerlo en un selector de cuerpo no funciona para mí
Jgerstle

@jgerstle, especificar la fuente bodydebería funcionar, asegúrese de no anular la fuente en otro lugar, puede anularla h*o petiquetarla como lo hacemos habitualmente.
Suicidio comercial

Parece que algo lo está anulando, pero no creo que sea mi propio código, creo que podría ser solo que los valores predeterminados de Chrome son raros, porque lo configuré como importante y todavía parece anularse. Tendré que investigarlo más.
jgerstle

Lo obtuve usando: no (.fa) para mantener el mismo * selector, pero no apuntar a nada usando font-awesome
jgerstle

4

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


2
Termino con solo cuadrados para las imágenes cuando hago esto.
Gárgola

igual aquí, ¿cómo eliminaste los cuadrados? @Gargoyle
AngularM

4

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.


Observe que sus caminos comienzan con @fortawesome. Observe la palabra 'FORT', no 'FONT'. Mi instalación también lo está haciendo. Alguien sabe qué pasa con esto?
Helzgate

No importa, aparentemente tienen alguna estructura de cambio de nombre. Ver este post de Github
Helzgate

@Aniketkale, ¿qué no funciona? Presente dos opciones
Paul

3

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)


1
solo un angular-cli-build.jsaviso no hay en la última rama de
webpack

Además, vendorNpmFiles no se encuentra en el código Angular-CLI actual . Al ver la respuesta aceptada de Alon, ¿creo que esto está desactualizado?
Arjan

1
@Arjan sí, esta respuesta está desactualizada ... esto fue para la CLI pre webpack. La respuesta de Alon es la respuesta aceptada
Nik

3

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


2

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


2

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

2

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>

2

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

Es una buena pregunta. Siempre ha sido una pregunta para mí
Seyed Ali Mahmoody

2

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>


2

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!


2

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.


1

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.


1

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


Querrás agregar font-awesome a tus 'dependencias', no 'dev-dependencies', ya que lo necesitarás en tu versión final. Además, las instrucciones anteriores no responden cómo el proyecto Angular lo recogerá una vez que se agreguen a su archivo package.json.
Nik

1

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

Intenté esto Funciona bien en local, pero cuando trato de construirlo, faltan íconos.
Piyush Choudhary

1

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.


1

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]



1

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.