Level 88
Did you also copy the fonts to the public directory?
Nov 9, 2019
20
Level 2
Laravel - FontAwesome not working, no errors
I have a project where I want to use font awesome for the icons. I put the font awesome files in my public directory and loaded it in via the template like so: <link rel="stylesheet" type="text/css" href="{{ asset('css/fontawesome.min.css') }}">but it does not work, the icons do not show and I get no error whatsoever. What is causing this? Am I missing files? I've checked the paths to the fonts in light.css, regular.css etc and they all have the correct path which is webfonts/... I dont know what is causing this
Code
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Visual Acumen</title>
<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/fontawesome.css') }}">
</head>
<body>
<div class="navigation">
<nav id="dashboard-sidebar" class="dashboard-sidebar" style="background-color: {{ Auth::user()->company->sidebar->background_color }}">
<div class="dashboard-sidebar-brand">
<h5><a href="../../index.html" class="text-white">{{ Auth::user()->company->name }}</a></h5>
</div>
<div class="dashboard-main">
<ul class="dashboard-sub-content list-unstyled">
<a href="{{ route('home') }}" class="dashboard-sidebar-link">
<li class="dashboard-sidebar-listitem {{ request()->is('home') ? 'active' : '' }}"><i class="fal fa-window-maximize"></i>Dashboard</li>
</a>
<a href="{{ route('projects') }}" class="dashboard-sidebar-link">
<li class="dashboard-sidebar-listitem {{ request()->is('projects') ? 'active' : '' }}"><i class="fal fa-folder"></i>Projects</li>
</a>
<a href="#" class="dashboard-sidebar-link slideout slideout-item" data-slideout-item="clients">
<li class="dashboard-sidebar-listitem"><i class="fal fa-user-tie"></i>Clients</li>
</a>
<a href="#" class="dashboard-sidebar-link slideout slideout-item" data-slideout-item="invoices">
<li class="dashboard-sidebar-listitem"><i class="fal fa-file-invoice"></i>Invoices</li>
</a>
<a href="employees.html" class="dashboard-sidebar-link">
<li class="dashboard-sidebar-listitem"><i class="fal fa-user-friends"></i>Employees</li>
</a>
@if(Auth::user()->isCompanyOwner())
<a href="your_company.html" class="dashboard-sidebar-link">
<li class="dashboard-sidebar-listitem"><i class="fal fa-building"></i>My company</li>
</a>
@endif
</ul>
</div>
<div class="dashboard-clients" style="display: none; position: absolute; top: 100px;">
<ul class="dashboard-sub-content list-unstyled">
<a href="#" class="dashboard-sidebar-link text-white">
<li class="dashboard-sidebar-listitem slidein" data-slidein-item="clients"><i class="fas fa-arrow-circle-left"></i> Terug naar hoofdmenu </li>
</a>
</ul>
<div class="devider"></div>
<ul class="dashboard-sub-content list-unstyled">
<div class="sidebar-sub-heading mt-3">
<h6 class="text-white">All clients</h6>
</div>
<a href="clients.html" class="dashboard-sidebar-link text-white">
<li class="dashboard-sidebar-listitem">See all clients </li>
</a>
<div class="sidebar-sub-heading mt-4">
<h6 class="text-white">Clients</h6>
</div>
<a href="#" class="dashboard-sidebar-link text-white">
<li class="dashboard-sidebar-listitem"> Siemens </li>
</a>
<a href="#" class="dashboard-sidebar-link text-white">
<li class="dashboard-sidebar-listitem"> Philips </li>
</a>
<a href="#" class="dashboard-sidebar-link text-white">
<li class="dashboard-sidebar-listitem"> Samsung </li>
</a>
</ul>
</div>
<div class="dashboard-invoices" style="display: none; position: absolute; top: 100px;">
<ul class="dashboard-sub-content list-unstyled">
<a href="#" class="dashboard-sidebar-link text-white">
<li class="dashboard-sidebar-listitem slidein" data-slidein-item="invoices"><i class="fas fa-arrow-circle-left"></i> Terug naar hoofdmenu </li>
</a>
</ul>
<div class="devider"></div>
<ul class="dashboard-sub-content list-unstyled">
<div class="sidebar-sub-heading mt-3">
<h6 class="text-white">All invoices</h6>
</div>
<a href="invoices.html" class="dashboard-sidebar-link text-white">
<li class="dashboard-sidebar-listitem">See all invoices </li>
</a>
<div class="sidebar-sub-heading mt-5">
<h6 class="text-white">Recent Invoices</h6>
</div>
<a href="#" class="dashboard-sidebar-link text-white">
<li class="dashboard-sidebar-listitem"> Invoice #000001 </li>
</a>
<a href="#" class="dashboard-sidebar-link text-white">
<li class="dashboard-sidebar-listitem"> Invoice #000002 </li>
</a>
<a href="#" class="dashboard-sidebar-link text-white">
<li class="dashboard-sidebar-listitem"> Invoice #000003 </li>
</a>
</ul>
</div>
<button id="dashboard-sidebar-toggle" class="btn btn-light btn-sm shadow dashboard-sidebar-toggle"><i class="fal fa-arrow-left"></i></button>
</nav>
<nav class="dashboard-sub-sidebar" style="background-color: {{ Auth::user()->company->sidebar->background_color }}">
<div class="dashboard-sub-sidebar-container">
<div class="dashboard-sub-top-content text-center text-white">
<div class="dashboard-sub-top-logo">
LOGO
</div>
<div class="sidebar-icon-box slideout mt-4" data-slideout-block="search">
<i id="dashboard-sub-search" class="fa fa-search dashboard-sub-search"></i>
</div>
</div>
<div class="dashboard-sub-user-content text-center">
<div class="sidebar-icon-box slideout mb-3" data-slideout-block="notification">
<div class="notification-dot"></div>
<i id="dashboard-sub-notification" class="fa fa-bell dashboard-sub-notification"></i>
</div>
<div class="sidebar-icon-box mb-3">
<i id="dashboard-sub-help" class="fa fa-question-circle dashboard-sub-help"></i>
</div>
<div class="btn-group dropright">
<img src="https://stockphoto.com/assets/landingpage/images/Depositphotos_149433254_m-2015.jpg" class="dashboard-sub-sidebar-user-image dropdown-toggle" alt="" width="40" height="40" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="dropdown-menu">
<ul class="list-unstyled">
<div class="list-title">Rainier laan</div>
<li class="list-item"><a href="">Profiel</a></li>
<li class="list-item"><a href="">Account instellingen</a></li>
<li class="list-item"><a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Uitloggen
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</li>
<div class="list-title">Admin options</div>
<li class="list-item"><a href="">Preferences</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
<div class="block-overlay"></div>
<div class="search-block slidein-block slidein-block-search slideout-block-search slideout-block">
<div class="search-header">
<div class="close-search-block slidein mr-4" data-slidein-block="search">
<i class="fal fa-times close"></i>
</div>
<div class="search-form">
<input type="text" class="form-control" placeholder="Search">
</div>
</div>
<div class="slideout-block-content mt-5">
<h6>Recent search history</h6>
<ul class="list-unstyled search-history-list">
<li style="height: 30px;display: flex;align-items: center; padding: 20px"><a href=""><i class="far fa-clock mr-3"></i> Bananen</a></li>
<li style="height: 30px;display: flex;align-items: center; padding: 20px;"><a href=""><i class="far fa-clock mr-3"></i> Bananen</a></li>
<li style="height: 30px;display: flex;align-items: center; padding: 20px"><a href=""><i class="far fa-clock mr-3"></i> Bananen</a></li>
</ul>
</div>
</div>
<div class="notification-block slideout-block slidein-block slideout-block-notification slidein-block-notification">
<div class="notification-header">
<div class="close-notification-block slidein mr-4" data-slidein-block="notification">
<i class="fal fa-times close"></i>
</div>
<h3 class="m-0">Notifications</h3>
</div>
<div class="slideout-block-content mt-5">
<h6>Recent notifications</h6>
</div>
</div>
<div id="content-container" class="content-container">
<div id="app">
@yield('content')
</div>
</div>
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/main.js') }}"></script>
{{--<script type="text/javascript" src="{{ asset('js/fontawesome.js') }}"></script>--}}
</body>
</html>
Image of file structure
Level 1
Have you tried inspecting the page source, finding the actual URL generated by the asset() function, and then visiting that URL directly? That will allow you to verify that the data is included correctly.
Level 2
@bobbybouwmann Yes I made a folder called webfonts in the public directory
Level 2
@arg Yes I've checked it and the path is correct but I still do not show for some reason.
Level 122
is your web server pointing at the public folder (ie, you don't see public in your page urls) ?
open your browser dev tools, load the page and look for any errors
Level 2
@snapey Everything in the network tab has code 200 which is OK, Console gives no errors and the paths are correct. I think I'm missing something but I dont know what.
Level 28
Are Font Awesome class styles being applied or not at all (if you inspect an icon) ?
Level 2
Yes the styles are applied not the icons are not showing
Level 28
Can you post an example of how you're using it in your HTML please :) ?
And your public folder structure
Level 27
@rainieren I hope you are not just trying to use a premium font. How many fonts are you trying to display on your page and are you using a paid version or free fonts?
Level 2
I updated the question
Level 27
@rainieren I am seeing fal fa-folder , fal fa-user-tie I don't think fontawesome uses fal I think it should be fas or far... pls try fas or confirm in the docs
Level 2
Level 28
@laraj You have far, fas, fad, fab and fal with FA Pro
1 like
Level 28
What are your paths in your fontawesome.css file ?
Level 27
Yes I know. But that light font is not free. Are you paying for fontawesome? Only paid members can get that font. You can use fas fa-user-tie for free
Level 2
@piljac1 See the image, I updated the question. my fontawesome.css file does not have any paths. Those paths are in light.css, regular.css etc but those are correct because they are ../webfonts/etc and I have the folder webfonts, and in the right position
Level 1
Try this CDN instead:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
I rendered the code that was edited into the original post verbatim replacing the Font Awesome include with the CDN and it works fine via the W3Schools sandbox:
- https://files.catbox.moe/vgkeyi.png
- https://www.w3schools.com/icons/tryit.asp?filename=tryicons_awesome_intro_basic
And/or try Ctrl+F5 to try a hard reload and clear the cache, if not already tried.
1 like
Level 1
@ARG Thankyou.
Level 28
Oh I think I know what your issue is. Since you're using the fontawesome.css file, you need to include your light.css, regular.css, solid.css and brands.css.
fontawesome.css doesn't declare any font-face, so that's why it isn't working. If you don't want to be granular, you can use Font Awesome's all.css which declares all font faces within its own CSS file.
<link rel="stylesheet" type="text/css" href="{{ asset('css/fontawesome.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/solid.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/light.css') }}">
<!-- etc. -->
Please or to participate in this conversation.