Categoría: Laravel

Como instalar fontawesome en laravel

Fontawesome (https://fontawesome.com/) es una librería que nos proporciona un conjunto de iconos de forma gratuita que podemos usar en nuestra web. También dispone de un plan de pago para ampliar los iconos gratuitos. En este artículo vamos a ver como instalar fontawesome en laravel con npm y como usar sus iconos.

Instalación

Ejecuta el siguiente comando en la raíz del proyecto:

npm install --save @fortawesome/fontawesome-free

En el archivo package.json verás que se añade la dependencia @fortawesome/fontawesome-free

Añade en el archivo resources\sass\app.scss la siguiente linea:

@import '~@fortawesome/fontawesome-free/css/all.css';

Por ultimo ejecuta el siguiente comando en la raíz del proyecto:

npm run dev

Como usar los iconos

Lo único que tenemos que hacer una vez instalado es irnos al buscador https://fontawesome.com/icons?d=gallery y buscar el icono que necesitamos por emplo si escribimos «user» dentro de los iconos gratuitos nos salen los siguientes:

Seleccionamos el tercero y hacemos click en la etiqueta i, automáticamente esta etiqueta se nos copiará al portapapeles.

Lo pegamos en nuestra vista y listo:

<div class="card-body">
    @if (session('status'))
        <div class="alert alert-success" role="alert">
            {{ session('status') }}
        </div>
    @endif

    You are logged in! <i class="fas fa-user"></i>
</div>

Posibles problemas

La ruta de los recursos no se genera correctamente y los iconos no se muestran. Por defecto solo funciona si tenemos la aplicación en la raíz del dominio, de lo contrario veremos esta imagen:

Es decir si la url de la aplicación es «http://localhost/laravel/public/» no va a funcionar, necesitaríamos tenerla en «http://localhost/». Si estas en local puedes crear un virualhost para que apunte a la carpeta public de la aplicación.

Otra solución es usar setResourceRoot por ejemplo:

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.setResourceRoot('../');

Donde antes teníamos un ruta como:

/fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.eot?8e49b728413079dfd9ee45d0c58d54e4

Ahora tenemos la siguiente:

../fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.eot?8e49b728413079dfd9ee45d0c58d54e4

Como traducir los mensajes de validación de Laravel

Laravel por defecto viene con varios textos para los errores de validación en ingles por ejemplo:

Para traducirlos nos vamos al siguiente repositorio https://github.com/Laraveles/spanish, entramos en «resources/lang» y copiamos la carpeta «es» y el archivo «es.json» al directorio «resources/lang» de nuestro proyecto. Quedaría de la siguiente forma:

Ahora debemos decirle a laravel que coja las traducciones de la carpeta es y no de en. Nos vamos a «config/app.php» y en la clave «locale» indicamos «es».

'locale' => 'es',

Listo ya tenemos los textos por defecto traducidos: