mdb-icon not displayed


Topic: mdb-icon not displayed

Tenarius asked 5 years ago

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: error icon

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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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