Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


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 commented 4 years ago

Hi,

Thank you for your help.

Best, Marta


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



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

  • 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