0

tengo un proyecto con laravel 7 y he instalado fontawesome pero no consigo que me salgan los iconos.

Tengo esta configuración

app.scss

@import "../vendor/bootstrap/bootstrap.min.css";
@import "../vendor/bootstrap-table/bootstrap-table.min.css";
@import "../vendor/twitter-boostrap/bootstrap.css";
@import "../vendor/twitter-boostrap/bootstrap-datetimepicker.css";

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';
    
@import "style";

Os muestro lo que obtengo por pantalla introducir la descripción de la imagen aquí

Webpack lo tengo de esta forma, me genera un fichero css/app.css

mix.js(['resources/assets/js/app.js',
    'resources/assets/vendor/chartjs/Chart.bundle.js',
    'resources/assets/vendor/chartjs/utils.js',
], 'public/js/app.js')
.sass('resources/assets/sass/app.scss', 'public/css')
.options({
    processCssUrls: false
});

Veo que me da un error al intentar cargar los archivos woff y ttf (las fuentes???)

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Gracias,

6
  • ¿Esto no es erróneo: '~@fortawesome/fontawesome-free/scss/fontawesome';? ¿No debería ser fontawesome en lugar de fortawesome? El error se estaría repitiendo en los cuatro import ...
    – A. Cedano
    el 5 nov. 2020 a las 11:06
  • He probado con este otro comando. npm install font-awesome --save-dev y luego $fa-font-path: "~font-awesome/fonts"; @import "~font-awesome/scss/font-awesome";
    – ilernet2
    el 5 nov. 2020 a las 14:37
  • ¿Qué me dices de lo que te comenté anteriormente? ¿Por qué intentas otra instalación? ¿No lo tenías ya instalado?
    – A. Cedano
    el 5 nov. 2020 a las 14:38
  • He probado lo que me has dicho y me hace lo mismo. Es laravel7
    – ilernet2
    el 5 nov. 2020 a las 15:07
  • Yo lo importo así @import "~@fortawesome/fontawesome-free/css/all.css"; y me funciona. el 5 nov. 2020 a las 17:39

1 respuesta 1

0

La solución ha sido poniendo esta sentencia en el fichero webpack.mix.js

mix.copyDirectory('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts');

Al final los 2 ficheros me han quedado de esta forma.

Fichero app.scss

// Fontawesome-free@5.12.1
$fa-font-path: "../webfonts";

@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/regular.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';

Webpack.mix.js

const mix = require('laravel-mix');

mix.setResourceRoot("../");

mix.copyDirectory('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts');

mix.js(['resources/assets/js/app.js',
        'resources/assets/vendor/bootstrap/bootstrap.min.js',
        'resources/assets/vendor/bootstrap/bootstrap.bundle.min.js',
    ], 'public/js/app.js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false
    });

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.