angularjs - fontawesome - install font awesome angular 6

Fontawesome no funciona cuando el proyecto se construye con gruñido

Question

Estoy usando la fuente de la biblioteca de fuentes impresionante. Funciona cuando el proyecto no se construye / uglified con gruñido.

Pero cuando estoy construyendo el proyecto con ronco, no funciona. Me sale este error en la consola: ... / fonts / fontawesome-webfont.woff? V = 4.0.3 404 (No encontrado)

He scaffolded el proyecto con yeoman.

Esta es mi referencia en index.html

 <!-- build:css styles/fontawesome.css -->
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<!-- endbuild -->

¿Alguna idea de lo que puede estar mal?

Actualización Necesito copiar la carpeta / bower_components / font-awesome / fonts a dist / fonts. Esto debe hacerse en el archivo grunt. Probablemente bajo las opciones de "copia"

copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: ''<%= yeoman.app %>'',
dest: ''<%= yeoman.dist %>'',
src: [
''*.{ico,png,txt}'',
''.htaccess'',
''bower_components/**/*'',
''images/{,*/}*.{gif,webp}'',
''styles/fonts/*''
]
}, {
expand: true,
cwd: ''.tmp/images'',
dest: ''<%= yeoman.dist %>/images'',
src: [
''generated/*''
]
}]
},

Pero no estoy seguro de dónde incluir esto.

Answer 1

Aquí está la solución: https://stackoverflow.com/a/32128931/3172813

{
expand: true,
cwd: ''<%= yeoman.app %>/bower_components/font-awesome'',
src: ''fonts/*'',
dest: ''<%= yeoman.dist %>''
}

Answer 2

Como respondí anteriormente, este me funcionó muy bien también

 // Copies remaining files to places other tasks can use
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: ''<%= yeoman.app %>'',
dest: ''<%= yeoman.dist %>'',
src: [
''*.{ico,png,txt}'',
''.htaccess'',
''*.html'',
''scripts/components/{,*/}*.html'',
''images/{,*/}*.{webp,png,jpg,jpeg,gif}'',
''fonts/*'',
''styles/fonts/{,*/}*.*'',
''services/{,*/}*.json'',
''services/mocks/{,*/}*.json''
]
}, {
expand: true,
cwd: ''.tmp/images'',
dest: ''<%= yeoman.dist %>/images'',
src: [''generated/*'']
}, {
expand: true,
cwd: ''.tmp/concat/scripts'',
dest: ''<%= yeoman.dist %>/scripts'',
src: ''{,*/}*.js''
}, {
expand: true,
cwd: ''.tmp/concat/styles'',
dest: ''<%= yeoman.dist %>/styles'',
src: ''{,*/}*.css''
}, {
expand: true,
cwd: ''<%= yeoman.app %>'',
src: ''styles/Bootstrap/fonts/bootstrap/*'',
dest: ''<%= yeoman.dist %>''
}, {
expand: true,
cwd: ''bower_components/font-awesome/fonts/'',
src: [''*.*''],
dest: ''<%= yeoman.dist %>/fonts''
}]
}

Answer 3

Estaba teniendo el mismo problema. Eché un vistazo al archivo bower.json para font-awesome y encontré esto:

{
"name": "font-awesome",
"description": "Font Awesome",
"keywords": [],
"homepage": "http://fontawesome.io",
"dependencies": {},
"devDependencies": {},
"license": ["OFL-1.1", "MIT", "CC-BY-3.0"],
"main": [
"less/font-awesome.less",
"scss/font-awesome.scss"
],
"ignore": [
"*/.*",
"*.json",
"src",
"*.yml",
"Gemfile",
"Gemfile.lock",
"*.md"
]
}

No se hizo referencia a "font-awesome.css" en la matriz "principal". Tal vez, como yo, no estés usando SASS o LESS para diseñar. Así que no se están agregando estilos para font-awesome. Modifiqué el archivo json de la siguiente manera:

{
"name": "font-awesome",
"description": "Font Awesome",
"keywords": [],
"homepage": "http://fontawesome.io",
"dependencies": {},
"devDependencies": {},
"license": ["OFL-1.1", "MIT", "CC-BY-3.0"],
"main": [
"less/font-awesome.less",
"scss/font-awesome.scss",
"css/font-awesome.css",
"fonts/fontawesome-webfont.tff",
"fonts/fontawesome-webfont.woff",
"fonts/fontawesome-webfont.woff2"
],
"ignore": [
"*/.*",
"*.json",
"src",
"*.yml",
"Gemfile",
"Gemfile.lock",
"*.md"
]
}

Guardé y ejecuté el servicio de ronco, y ahora aparecen mis íconos geniales.

Espero que esto ayude.

Answer 4

He editado mi Gruntfile.js de la siguiente manera:

//...
copy: {
dist: {
files: [//... {
expand: true,
dot: true,
cwd: ''bower_components/font-awesome/fonts/'',
src: [''*.*''],
dest: ''<%= yeoman.dist %>/fonts''
}]
},
app: {
files: [{
expand: true,
dot: true,
cwd: ''bower_components/font-awesome/fonts/'',
src: [''*.*''],
dest: ''<%= yeoman.app %>/fonts''
}]
}, //...
}
//...
grunt.registerTask(''serve'', ''Compile then start a connect web server'', function (target) {
if (target === ''dist'') {
return grunt.task.run([''build'', ''connect:dist:keepalive'']);
}
grunt.task.run([
''clean:server'',
''wiredep'',
''copy:app'', // Added this line
''concurrent:server'',
''autoprefixer:server'',
''connect:livereload'',
''watch''
]);
});

Estoy usando yeoman 1.4.7 y su generador angular. Es muy importante agregar copy: app y no solo copy: dist task (como se sugirió anteriormente). Si no incluye copy: app cuando ingresa a grunt serve , no funcionará. Con copy: dist solo estás considerando grunt serve:dist

Answer 5

Hola, el problema principal es que los archivos de fuente requeridos por font-awesome css no se copian luego de ejecutar la tarea gruñona y es posible que obtengas un error 404 no encontrado; el mismo se puede verificar si abres el modo desarrollador de Chrome y observas el consola o pestaña de redes. El mismo problema puede ocurrir para bootstrap también.

Por lo tanto, necesitamos modificar la tarea de grunt para que todos los archivos de fuente se copien.

Agregue una tarea de copia separada para los archivos de fuentes.

copy: {
dist: { .....
},
fonts: {
expand: true,
flatten: true,
cwd: ''.'',
src: [''bower_components/bootstrap/fonts/*'', ''bower_components/font-awesome/fonts/*''],
dest: ''<%= yeoman.dist %>/fonts'',
filter: ''isFile''
},
styles: { .......
}
}

Registre la tarea ''copy: fonts'' en grunt.registerTask para que se ejecute en el tiempo de compilación.

Answer 6

La forma más sencilla de hacerlo es ir a su propio bower.json y agregar una propiedad de overrides .

{
"name": "xxx",
"version": "x.x.x",
"dependencies": {
...,
"fontawesome": "~4.0.3"
},
"devDependencies": {
...,
},
"overrides": {
"fontawesome": {
"main": [
"./css/font-awesome.css"
]
}
}
}

Deberá copiar las fuentes de la carpeta fontawesome/fonts su carpeta de app/fonts manualmente. No se Gruntfile edición de Gruntfile o SCSS ni nada más.

Answer 7

Mi solución fue ir con un enfoque CDN:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

Ninguna de las respuestas funcionó por alguna razón.

Answer 8

No sé lo que estaba haciendo mal, pero ninguna de las soluciones propuestas funcionó para mí. Cualquier cosa que intenté, la versión de producción (distribución) no mostraba los íconos.

Terminé usando los siguientes componentes: https://github.com/philya/font-awesome-polymer-icons-generator y https://github.com/philya/font-awesome-polymer-icons

font-awesome-polymer-icons-generator

Nota: python necesitaba

Le permite generar un icono de SVG tipo fuente increíble para los iconos (que tiene en uso) en su proyecto.

Como ejemplo, digamos que quiero el code, line-chart, github-alt los iconos code, line-chart, github-alt en mis proyectos, y luego los generaría así:

./makefaicons.py myappname code line-chart github-alt

Esto genera el archivo build/myappname-icons.html . Este archivo necesita ser importado en mi componente como cualquier otro componente:

<link rel="import" href="<pathToFile>/myappname-icons.html">

entonces puedo obtener los íconos geniales de la fuente así:

<core-icon icon="myappname:line-chart"></core-icon>

es decir, prefijo el nombre normal de fuente impresionante con el nombre que di cuando creé el conjunto de iconos.

font-awesome-polymer-icons

También puede importar el conjunto completo pre-construido de íconos increíbles de fuentes:

bower install font-awesome-polymer-icons

Tenga en cuenta que esto agrega 300 + KB a su tamaño de distribución y el autor señala que no se recomienda para uso en producción.

Answer 9

Para aquellos que usan Google App Engine , lo siguiente funcionó para mí:

Agregar a Gruntfile.js :

copy: {
build_font_awesome: {
files: [
{
expand: true,
flatten: true,
src: ''vendor/components-font-awesome/fonts/*'',
dest: ''<%= build_dir %>/fonts''
}
]
},
compile_font_awesome: {
files: [
{
expand: true,
flatten: true,
src: ''vendor/components-font-awesome/fonts/*'',
dest: ''<%= compile_dir %>/fonts''
}
]
}
}

Estoy usando LESS, así que importé font-awesome.less al agregar esto a mi archivo main.less .

@import ''../../vendor/components-font-awesome/less/font-awesome.less'';

Luego agregué esto a mi archivo app.yaml .

handlers:
- url: /fonts
static_dir: static/fonts

Answer 10

Pude solucionar el problema añadiendo lo siguiente a copy.dist.files:

{
expand: true,
flatten: true,
src: ''bower_components/components-font-awesome/fonts/*'',
dest: ''dist/fonts''
}

Answer 11

Si está trabajando con SailsJS y Bower, he creado una solución que soluciona los problemas con las fuentes Fontawesome y Bootstrap.

1. Asegúrese de que sus tasks/config/bower.js aspecto similar a: https://gist.github.com/robksawyer/fc274120aef9db278eec
2. Se agregó el módulo npm grunt-remove .
3. Crear el archivo remove.js en tasks/config : https://gist.github.com/robksawyer/2fcf036fdf02436aa90b
4. Actualizar las tasks/register/compileAssets archivo tasks/register/compileAssets : https://gist.github.com/robksawyer/fa04a34ea103bead1c61
5. Actualice el archivo tasks/config/copy.js a: https://gist.github.com/robksawyer/2aac6d0cdb73bfa8239f

Answer 12

Si está utilizando SASS en su proyecto, encontré una manera más directa que no implica cambiar el archivo grunt si alguien está interesado:

http://likesalmon.net/use-font-awesome-on-yeoman-angularjs-projects/

Básicamente incluya estas 2 líneas en la parte superior de su archivo main.scss y las fuentes deberían funcionar.

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

Answer 13

Si está utilizando la pila de tareas de grunt completa de yeoman, la tarea useminPrepare construye una hoja de estilos combinada de todas las hojas de estilo que coloca en la build:css comment, como usted. (Consulte https://github.com/yeoman/grunt-usemin para obtener información adicional). Una vez que finaliza el proceso de compilación, este archivo, algo así como "vendor.234243.css", se copia en la carpeta de estilos. Es por eso que la ruta de su fuente ya no es válida. Hay al menos 2 posibilidades para resolver esto:

1. Podrías eliminar el font-awesom css de la build:css block:

   <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
   <!-- build:css styles/fontawesome.css -->
   this will be processed by useminPrepare
   <!-- endbuild -->

2. Copie la folder fuentes como un hermano a la carpeta de styles mediante una tarea de grunt adicional en su gruntfile.

Answer 14

Yo tuve el mismo problema. El siguiente código resolvió mi problema.

copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: ''<%= config.app %>'',
dest: ''<%= config.dist %>'',
src: [
''*.{ico,png,txt}'',
''.htaccess'',
''images/{,*/}*.webp'',
''{,*/}*.html'',
''styles/fonts/{,*/}*.*''
]
},{
expand: true,
dot: true,
cwd: ''bower_components/bootstrap/dist'', // change this for font-awesome
src: [''fonts/*.*''],
dest: ''<%= config.dist %>''
}]
}
}

Answer 15

esto copiará las fuentes donde las necesite.

copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: ''<%= yeoman.app %>'',
dest: ''<%= yeoman.dist %>'',
src: [
''*.{ico,png,txt}'',
''.htaccess'',
''images/{,*/}*.webp'',
''{,*/}*.html'',
''styles/fonts/{,*/}*.*''
]
}, {
expand: true,
dot: true,
cwd: ''app/bower_components/fontawesome/fonts/'',
src: [''*.*''],
dest: ''<%= yeoman.dist %>/fonts''
}]
},