Mar 30, 2021
0
Level 2
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 :

as you can see in compiling result eveything is compiled well but the icons not displaying ??
Please or to participate in this conversation.