In my React project, I am utilizing the offline version of Font Awesome. I followed this manual to set it up. However, I am encountering an issue where the icons work on some pages but not on others. For instance, they display properly on localhost/courses but not on localhost/courses/1. A similar situation occurs with localhost/authors and localhost/authors/1. How can I resolve this problem? Here is how I implemented my current solution:
I downloaded the offline bundle which includes multiple folders. I then referenced /css/all.css and /js/all.js inside the <head> tag.
<head>
<link href="/folder/css/all.css" rel="stylesheet">
<script defer src="/folder/js/all.js"></script>
</head>
<body>
<i class="fas fa-user"></i> <!-- uses solid style -->
<i class="far fa-user"></i> <!-- uses regular style -->
<i class="fal fa-user"></i> <!-- uses light style -->
<!--brand icon-->
<i class="fab fa-github-square"></i> <!-- uses brands style -->
</body>