Topic: mdb-icon not displayed
Vue Icons are not displayed
When i try to implement some components from mdbvue-pro in my laravel project, it works fine.
Excepted the icons. They are shown as an little error-symbol:
Its like one of the mdb-docs-examples: https://mdbootstrap.com/docs/vue/modals/additional/ (scroll down to the bottom)
i allready implemented import "@fortawesome/fontawesome-free/css/all.min.css";
to my app.js.
My component:
<template>
<mdb-card class="card-image" style="background-image: url(https://mdbcdn.b-cdn.net/img/Photos/Others/gradient1.jpg)">
<div class="text-white text-center py-5 px-4 my-5">
<div>
<h2 class="card-title h1-responsive pt-3 mb-5 font-bold"><strong>Create your beautiful website with MDBootstrap</strong></h2>
<p class="mx-5 mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!
</p>
<mdb-btn outline="white" size="md" icon="clone">View project</mdb-btn>
</div>
</div>
<mdb-icon fab icon="accusoft" />
</mdb-card>
</template>
<script>
import { mdbCard, mdbBtn, mdbIcon } from 'mdbvue';
export default {
name: 'JumbotronPage',
components: {
mdbCard,
mdbBtn,
mdbIcon
}
}
</script>
Has anyone an idea to solve this problem?
Some Greets
Tenarius answered 5 years ago
There seems to be a difference between using xampp and php artisan serve
.
When I use the last one, all icons are displayed correctly.
Does anyone have an idea why?
Tenarius answered 5 years ago
The solution is to define your public path
in laravel mix
, because xampp
use another root-path then php artisan serve
.
http://localhost/myproject/public/index.php //xampp
http://127.0.0.1:8000/index.php //serve
Add to your webpack.mix.js
in your root folder:
mix.setPublicPath('public');
mix.setResourceRoot('../');
Thats it.
Magdalena Dembna staff premium commented 5 years ago
Hi, as I understand you came up with the solution to your issue? We have done only very basic tutorials on laravel-mdbvue integration and in both examples, we used php artisan serve
- your example shows there is still much for us to cover in this area. Kind regards, Magdalena
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 5.8.2
- Device: PC
- Browser: Firefox
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes