Topic: Improve the CSS for Font Awesome
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.
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 premium priority commented a year ago
Hello Marta, the email is send. I'm using MDB Pro. I'm talking about Font awesome
Marta Szymanska staff pro premium commented a year ago
Hi,
ok, I'll check it.
Best, Marta
Hi,
thank you for your suggestion. We will fix this bug with font awesome in our CSS code.
Best, Marta
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.
Answered
- User: Pro
- Premium support: Yes
- Technology: jQuery
- MDB Version: 4.14.1
- Device: Desktop / Mobile
- Browser: Any
- OS: Windows 10
- Provided sample code: No
- Provided link: No