Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

devhoussam123's avatar

Font Awesome & Bootstrap Icons not displaying when using laravel mix outside laravel project?

I'm using laravel mix v6 to compile my scss and js files outside laravel project everything is work great but when I install the font awesome and bootstrap-icons the icons not displaying even if there is not errors or issues message.

Here is my HTML project files structure :

my-app/
├─ node_modules/
├─ public/
│  ├─ favicon.ico
│  ├─ assets/
│  ├─ fonts/
│  ├─ images/
│  ├─ mix-manifest.json
├─ assets/
│  ├─ scss/
│  ├─ js/
├─ index.html
├─ package.json
├─ webpack.mix.js
├─ .gitignore
├─ README.md

assets/scss/app.scss

...

@import "variables";

@import "~bootstrap-icons/font/bootstrap-icons";

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

...

assets/scss/_variables.scss

...

$fa-font-path:  "~@fortawesome/fontawesome-free/webfonts";
...

webpack.mix.js

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

mix.js('assets/js/app.js', 'assets/js')
   .sass('assets/scss/app.scss', 'assets/css')
   .setPublicPath('public');

index.html

...

<i class="fas fa-address-card"></i>
<i class="bi bi-archive"></i>
...

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "dependencies": {
        "@fortawesome/fontawesome-free": "^5.15.3",
        "bootstrap-icons": "^1.4.0",
    },
    "devDependencies": {
        "@popperjs/core": "^2.9.1",
        "laravel-mix": "^6.0.13",
        "lodash": "^4.17.21",
        "postcss": "^8.2.8",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.8",
        "sass-loader": "^10.1.1"
    }
}

compiling result :

Image

as you can see in compiling result eveything is compiled well but the icons not displaying ??

0 likes
0 replies

Please or to participate in this conversation.