fortawesome fontawesome font awesome angular webpack angular-cli

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



install font awesome angular 6 (22)

Estoy usando Angular 2+ y Angular CLI.

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

Opción 1:

Puede 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 github.com/angular/angular-cli/blob/master/docs/documentation/… 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

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 navegue a http: // localhost: 4200 .

Para verificar que Font Awesome se haya configurado correctamente, cambie src / app / app.component.html a 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 con fuente impresionante en la raíz dist, ya que, por defecto, el cli angular genera las fuentes en la raíz dist , que por cierto no es un problema en absoluto.

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

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

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 se configuran en angular-cli.json )

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)

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 archivo angular-cli.json localice la matriz styles[] y agregue aquí el directorio de referencias font-awesome, 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!? ], ... } ] ],

  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 + c y luego vuelva a ejecutar la aplicación usando ng serve porque los observadores son solo para la carpeta src y no se observa angular-cli.json para los cambios.

  5. ¡Disfruta de tus increíbles iconos!

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 instalar su webpack.config.js , agregando (y suponiendo que tiene instalado el módulo de nodo de fuente impresionante a través de npm o en el paquete.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, webpack crea una carpeta de assets :

// 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 a la carpeta de activos de desarrollo.
  • Webpack está copiando la carpeta de recursos de desarrollo en la carpeta de recursos de dist

Ahora, cuando finalice el proceso de compilación, la aplicación deberá buscar el archivo .scss 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]'' },

Finalmente, en el archivo .scss , estoy importando el .scss font-awesome y definiendo la ruta de las fuentes, que es, nuevamente, dist/assets/font-awesome/fonts . La ruta es dist porque en mi webpack.config el output.path está configurado 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 forma, 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 la fuente impresionante en 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

El paquete font-awesome en NPM no se ha actualizado desde 2016.

Mi problema fue que estaba usando un icono que se agregó en una versión posterior de font-awesome.

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

Use el paquete FontAwesome 5 Angular:

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.

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 paquete.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 agregue MatIconModule a sus importaciones @NgModule

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

}

Ahora en cualquier archivo de plantilla ahora puede hacer

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

Hay muchas buenas respuestas aquí. Pero si los probó todos y aún obtiene cuadrados en lugar de iconos impresionantes, revise sus 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 reemplazar * selector a body resolvió mi problema:

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

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 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 nuevas a $fa-font-path: "../../../node_modules/font-awesome/fonts";

El uso de ~ hará que sass mire 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 estará mal 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í es por qué

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

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

Este <i class="fa fa-coffee"></i> funciona . 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.

Para Angular 6,

Primero npm install font-awesome --save

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

Recuerde no agregar puntos delante de node_modules/ .

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] de file-loader?name=/assets/fonts/[name].[ext]

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

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>

Puedes 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:

angular-font-awesome

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 utilizar 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 está utilizando SASS, puede instalarlo a través de npm

npm install font-awesome --save

e impórtelo 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 . ;)

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.

Usando LESS (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.