Topic: Font Awesome Pro Icons broken in Lightbox
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.
How can I fix this?
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 pro premium priority commented 2 years 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?
kpienkowska staff commented 2 years 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 pro premium priority commented 2 years ago
Thank you very much! That finally helped to solve the issue! Thanks a lot for your support!
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 pro premium priority commented 2 years 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.
Hi again,
Is there any chance of finding an implementable solution for me here?
Thanks, Ralf
kpienkowska staff commented 2 years ago
I will investigate it further and get back to you.
Ralf pro premium priority commented 2 years ago
Thanks. I still haven't found a solution yet. This sucks.
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 pro premium priority commented 2 years 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: "";
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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: No
- Provided link: No