Awesome font icons do not show with Laravel 7

Question

I want to use Awesome font icons in a laravel/Vue project:

I installed the fonts:

npm install font-awesome --save
Add to resources/sass/app.scss the line: @import "node_modules/font-awesome/scss/font-awesome.scss";
npm run dev

The relevant part of my layout file:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

But when I use any awesome icon in my html pages, e.g.

<i class="fa fa-copy"></i>

I always get a kind of dummy icon:

I then found this page: https://www.itsolutionstuff.com/post/how-to-install-and-use-font-awesome-icons-in-laravelexample.html. An dI tried to add the line

<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">

to the fonts part of my layout html-file. But I still get the dummy icon.

Any idea what the problem is?

Regards,

Hubert

Does this answer your question? How to Install Font Awesome in Laravel Mix — flakerimi
Check fontawesome version. Some icons will not support for the older version ! — Suvin94
If you inspect the browser, can you see the attempt to load the css and js files? My thinking is that you might need to check whether you are reading through laravel or public folder. — Mark N Hopgood

Karl Hill Karl Hill · Accepted Answer · 2021-05-04T16:22:24

You're using an older Font Awesome version.

npm install @fortawesome/fontawesome-free

Add to resources/sass/app.scss the following:

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

Finally,

npm run dev

Awesome font icons do not show with Laravel 7

1 Answers