Font Awesome Pro Icons broken in Lightbox

Topic: Font Awesome Pro Icons broken in Lightbox

Ralf priority asked 1 year 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?

Add comment

Kamila Pieńkowska staff answered 1 year ago

1 0 Best answer

Please insert min. 20 characters.

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 1 year 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 1 year 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 1 year ago

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

Add comment

Kamila Pieńkowska staff answered 1 year ago

0 0 Best answer

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 1 year 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: "";
}

Ok, to be more precise. When I use <code>data-mdb-font-awesome="pro"</code> no icons are shown at all in the lightbox. When I change it to <code>data-mdb-font-awesome="free"</code> 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):

<ul>
<li>Fehler beim Verarbeiten des Wertes für 'font'. Deklaration ignoriert.</li>
<li>Unbekannte Eigenschaft '-moz-osx-font-smoothing'. Deklaration ignoriert.</li>
</ul>

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.

<pre class="prettyprint"><code>.fa-images::before {
 content: "\f302";
}
</code></pre>

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

<pre class="prettyprint"><code>.lightbox-gallery .lightbox-gallery-toolbar button.lightbox-gallery-fullscreen-btn::before {
 content: "";
}
</code></pre>

Please insert min. 15 characters.

Add comment

Ralf priority answered 1 year ago

0 0 Best answer

Hi again,

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

Thanks, Ralf

Kamila Pieńkowska staff commented 1 year ago

I will investigate it further and get back to you.

Ralf priority commented 1 year ago

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

Add comment

Kamila Pieńkowska staff answered 1 year ago

0 0 Best answer

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 1 year 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.

Add comment

Write

Create snippet

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

Ralf

12Support score
6Questions 2Answers 0Snippets