Topic: Font Awesome Pro Icons broken in Lightbox

Ralf priority asked 11 months ago


Expected behavior

I want to display the lightbox with the Font Awesome Pro Icons. I added the CSS like this:

<link href="/assets/fontawesome-6.4.0/css/all.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="/assets/mdb5-pro-6.2.0/css/mdb.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="/assets/mdb5-pro-6.2.0/plugins/css/all.min.css" media="screen" rel="stylesheet" type="text/css">

My lightbox looks like this.

<div class="lightbox" data-mdb-font-awesome="pro">
     <img class="img-fluid" src="/assets/dynamic/photos/2023/04/23/7ee16470-38f1-462e-bfb6-28b855522da9.li.jpg"
          data-mdb-img="/assets/dynamic/photos/2023/04/23/7ee16470-38f1-462e-bfb6-28b855522da9.li.jpg"
          data-mdb-caption="Image">
</div>

Actual behavior

The icons in the Lightbox are not displayed at all. When I change data-mdb-font-awesome="pro" to data-mdb-font-awesome="free" or remove it, then the icons are broken.

broken icons

How can I fix this?


Kamila Pieńkowska staff answered 10 months ago


We are going to remove option fontAwesome sometime in the future maintaining proper icon display no matter what level of FA is used.

Until than you have two options that you can use as a workaround. You can change this section of the code in SCSS (in three places)

// replace this section 
  &:before {
        font-family: 'Font Awesome 6 Free';
        font-weight: var(--#{$prefix}lightbox-gallery-toolbar-button-before-font-weight);
      }
      &.fontawesome-pro:before {
        font-family: 'Font Awesome 6 Pro';
      }
// with this
 &:before {
        font: var(--fa-font-solid);
      }

Or override font for icons in CSS with: font: var(--fa-font-solid);


Ralf priority commented 10 months ago

Thanks for your answer, though I am not quite sure how to implement it. Since I am nor using SCSS directly in my current project, I would like to choose the CSS option.

I have the feeling that font: var(--fa-font-solid); is missing something. Ok how can I implement that?


Kamila Pieńkowska staff commented 10 months ago

Don't add the data-mdb-font-awesome="pro" attribute and use CSS I've added in the snippet:

https://mdbootstrap.com/snippets/standard/kpienkowska/5267255


Ralf priority commented 10 months ago

Thank you very much! That finally helped to solve the issue! Thanks a lot for your support!


Kamila Pieńkowska staff answered 10 months ago


Do you have any console errors?

Also what do you mean by:

When I change data-mdb-font-awesome="pro" to data-mdb-font-awesome="free" or remove it, then the icons are broken.

If you change to free icons or remove data-mdb-font-awesome="pro" you set icons to free and you don't import free icons. It's normal it does not work.


Ralf priority commented 10 months ago

Ok, to be more precise. When I use data-mdb-font-awesome="pro" no icons are shown at all in the lightbox. When I change it to data-mdb-font-awesome="free" the icons are broken. This makes totally sense since I use the "Font Awesome 6 Pro"

There are no errors in the console that make any sense regarding the icons. I just found these (sorry for the German messages):

  • Fehler beim Verarbeiten des Wertes für 'font'. Deklaration ignoriert.
  • Unbekannte Eigenschaft '-moz-osx-font-smoothing'. Deklaration ignoriert.

Like I said, we use the FA icons on almost any page. When I use the inspector it looks like this and the font family is set to "Font Awesome 6 Pro" when I look at the calculated value in the inspector.

.fa-images::before {
  content: "\f302";
}

The hidden icons in the lightbox look different in the inspector. And the font-family is calculated as: "Roboto", sans-serif

.lightbox-gallery .lightbox-gallery-toolbar button.lightbox-gallery-fullscreen-btn::before {
  content: "";
}

Ralf priority answered 10 months ago


Hi again,

Is there any chance of finding an implementable solution for me here?

Thanks, Ralf


Kamila Pieńkowska staff commented 10 months ago

I will investigate it further and get back to you.


Ralf priority commented 10 months ago

Thanks. I still haven't found a solution yet. This sucks.


Kamila Pieńkowska staff answered 11 months ago


Your code seems fine. Are you sure the path to the icon folder is correct?

Also I'm not sure if I understand you correctly. Does icons display properly with data-mdb-font-awesome="pro"?


Ralf priority commented 11 months ago

The icons are shown on all other pages. Just the lightbox is not showing them.

With data-mdb-font-awesome="pro" no icons are shown in the lightbox. With data-mdb-font-awesome="free" or without that attribute, the icons are broken like in the small screenshot above.



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: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.2.0
  • Device: HP Laptop
  • Browser: Firefox 111.0.1
  • OS: Ubuntu
  • Provided sample code: Yes
  • Provided link: No