Fontawsome icones in Mdb Card Footer ?


Topic: Fontawsome icones in Mdb Card Footer ?

Incremental free asked 1 year ago

Hello, I'd like to render icons in a mdb-card-footer. If I use "sun" or "clock" icons, it works, but if I use others Fontawsome icons, I only get a code in a square, instead of the icon.

In my main.js, I have the following line :

import "@fortawesome/fontawesome-free/css/all.min.css";

Here is my component code :

<mdb-card-footer
  color="danger-color"
  class="lighten-3 p-0 text-center">
  <ul class="list-unstyled list-inline font-small mt-3">
     <li class="list-inline-item pr-2 white-text">
        <mdb-icon far icon="clock" class="pr-1" />{{ this.TimeValue }}
     </li>
     <li class="list-inline-item pr-2">
        <a href="#" class="white-text">
           <mdb-icon far icon="thermometer-full" class="pr-1" />Alert level</a>
     </li>
  </ul>

and of course I have

import { mdbIcon, mdbCardFooter } from "mdbvue";

The clock icon is rendering well, but not the "thermometer-full".

Do I miss something ? Thanks


Incremental free answered 1 year ago

Well I found my answer on this page : https://mdbootstrap.com/docs/vue/content/icons-usage

the "far" style is for Pro versions. It works with the following code :

<mdb-icon fas icon="thermometer-full" class="pr-1" />Alert level</a>

I'm probably stupid, but the style is not clear for me.

Maybe the documentation could be clarified. Thanks


Mikołaj Smoleński staff commented 1 year ago

Thanks for your remarks. Best regards


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: 6.7.1
  • Device: PC
  • Browser: Firefox
  • OS: Win 10
  • Provided sample code: No
  • Provided link: No