css - fortawesome - npm install font awesome angular 6
Cómo usar íconos de font-awesome desde node-modules (5)
Instalé los iconos de font-awesome 4.0.3 usando npm install .
Si necesito usarlo de node-modules, ¿cómo debo usarlo en un archivo html?
Si necesito editar menos archivo, ¿necesito editarlo en node-modules?
En mi archivo style.css
/* You can add global styles to this file, and also import other style files */
@import url(''../node_modules/font-awesome/css/font-awesome.min.css'');
Instalar como npm install font-awesome --save-dev
En su archivo de desarrollo inferior, puede importar toda la fuente impresionante menos utilizando @import "node_modules/font-awesome/less/font-awesome.less" , o busque en ese archivo e importe solo los componentes que necesita. Creo que este es el mínimo para los íconos básicos:
/* adjust path as needed */
@fa_path: "../node_modules/font-awesome/less";
@import "@{fa_path}/variables.less";
@import "@{fa_path}/mixins.less";
@import "@{fa_path}/path.less";
@import "@{fa_path}/core.less";
@import "@{fa_path}/icons.less";
Como nota, todavía no vas a guardar tantos bytes haciendo esto. De cualquier manera, vas a terminar incluyendo entre 2-3k líneas de CSS no modificado.
También tendrá que servir las fuentes desde una carpeta llamada /fonts/ en su directorio público. Podrías simplemente copiarlos allí con una simple tarea, por ejemplo:
gulp.task(''fonts'', function() {
return gulp.src(''node_modules/font-awesome/fonts/*'')
.pipe(gulp.dest(''public/fonts''))
})
Podrías agregarlo entre tu etiqueta <head></head> así:
<head>
<link href="./node_modules/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
</head>
O cualquiera que sea tu camino a tus node_modules .
Editar (2017-06-26) - Descargo de responsabilidad: En el momento de esta respuesta original, las buenas herramientas no eran tan frecuentes. Con las herramientas de compilación actuales como webpack o browserify, probablemente no tenga sentido usar esta respuesta. Puedo eliminarlo, pero creo que es importante resaltar las diversas opciones que uno tiene y los posibles dos y los que no.
Tendrá que copiar los archivos como parte de su proceso de compilación. Por ejemplo, puede usar una npm postinstall comandos npm postinstall para copiar los archivos en el directorio correcto:
"postinstall": "cp -R node_modules/font-awesome/fonts ./public/"
Para algunas herramientas de compilación, existen paquetes de fuentes preexistentes. Por ejemplo, el paquete web tiene font-awesome-webpack que le permite require(''font-awesome-webpack'') simple require(''font-awesome-webpack'') .
Tienes que establecer la ruta de fuente correcta. p.ej
my-style.scss
$fa-font-path:"../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome";
.icon-user {
@extend .fa;
@extend .fa-user;
}