Topic: Fontawsome icones in Mdb Card Footer ?
Incremental free asked 4 years 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 4 years 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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