Topic: Improve the CSS for Font Awesome
Neanrakyr pro asked 4 years ago
Hello I found a little problem today
I use the Datepicker on my website, the arrow on the left and right on the calendar side does not appear.
I checked the code and saw that:
.picker_box .picker_header .picker_nav - next: before, .picker_box .picker_header .picker_nav - previous: before { font family: Font Awesome \ 5 Free, sans-serif; }
Maybe, you should delete it and add it in a single class:
body, html { font family: Font Awesome \ 5 Free, sans-serif; }
Why did I say that, it's because some people or I have the Pro version of Font Awesome, so by creating a class that groups the entire font family, you don't have to replace it every time. Less override, high performance.
ZFV free answered 4 years ago
Just in case you're creating your own CSS compiling all scss resources (which is my case), here's the workaround I've been using ever since:
$font-awesome-family : "Font Awesome 5 Pro", "Font Awesome 5 Free", sans-serif;
// Use Font Awesome configured family
table.dataTable thead {
.sorting:before, .sorting_asc:before, .sorting_desc:before, .sorting_asc_disabled:before, .sorting_desc_disabled:before {
font-family : $font-awesome-family;
}
.sorting:after, .sorting_asc:after, .sorting_desc:after, .sorting_asc_disabled:after, .sorting_desc_disabled:after {
font-family : $font-awesome-family;
}
}
ul.stepper {
.step {
&.done:before {
font-family : $font-awesome-family;
}
&.wrong:before {
font-family : $font-awesome-family;
}
}
}
@media only screen and (min-width : 993px) {
ul.stepper.horizontal {
.step {
&.done .step-title:before {
font-family : $font-awesome-family;
}
&.wrong .step-title:before {
font-family : $font-awesome-family;
}
}
}
}
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before {
font-family : $font-awesome-family;
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
font-family : $font-awesome-family;
}
.picker__box {
.picker__header {
.picker__nav--prev:before, .picker__nav--next:before {
font-family : $font-awesome-family;
}
}
}
Of course, here is what I've encountered so far. And this code is for version 4.8, which I'm stuck because of the known problem with MDB, Webpack and Laravel Mix.
Hope this helps.
Regards.
Marta Wierzbicka staff answered 4 years ago
Hi,
thank you for your suggestion. We will fix this bug with font awesome in our CSS code.
Best, Marta
MDBootstrap staff answered 4 years ago
Hi,
Datepicker is a premium component, and according to our system, you use MDB Free version.
Please, provide us a number o your order or registered email to confirm your access to MDB Pro components and premium support.
Send it to me on email: m.szymanska@mdbootstrap.com
Best, Marta
Neanrakyr pro commented 4 years ago
Hello Marta, the email is send. I'm using MDB Pro. I'm talking about Font awesome
Marta Wierzbicka staff commented 4 years ago
Hi,
ok, I'll check it.
Best, Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.14.1
- Device: Desktop / Mobile
- Browser: Any
- OS: Windows 10
- Provided sample code: No
- Provided link: No