Improve the CSS for Font Awesome

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

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.