Topic: Lightbox control icons are not working with Fontawesome SVG via JS
The issue
Hello dear community and MDB stuff,
the control icons in a lightbox are not working if using Fontawesome SVG via JS.
- MDB Lightbox Version:
Pro Advanced 6.2.0 - Fontawesome Version:
Pro 6.4.0
Expected behavior
Usually, the control icons are displayed like on that image: https://i.ibb.co/483Wqnm/wokring-lightbox-controls.jpg
Actual behavior
Actually, the control icons in a lightbox are not working as you can see on that image: https://i.ibb.co/s9Z1rFk/not-working-controls.jpg
Resources (screenshots, code snippets etc.)
The code
<html>
<head>
<link rel="stylesheet" href="/css/mdb.min.css">
<script src="/js/mdb.min.js" type="text/javascript"></script>
<script data-search-pseudo-elements defer src="https://kit.fontawesome.com/f5332838a7.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="lightbox" data-mdb-font-awesome="pro">
<div class="row">
<div class="col-lg-4">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp" alt="Table Full of Spices" class="w-100">
</div>
<div class="col-lg-4">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp" alt="Winter Landscape" class="w-100">
</div>
<div class="col-lg-4">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp" alt="View of the City in the Mountains" class="w-100">
</div>
</div>
</div>
</body>
</html>
Notes
You may noticed data-search-pseudo-elements in the <script>-tag inside the <head>-tag.
It's described in the official Fontawesome docs: https://fontawesome.com/v6/docs/web/add-icons/pseudo-elements#enable-pseudo-elements
Hi,
Try this solution and let me know if it helped.
1.Include fontawesome CSS import:
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
2.Add .fontawesome-pro to every element using fontawesome pro icons and set this style:
.fontawesome-pro::before {
display: none;
}
Now, both fontawesome premium icons and free icons generated by pseudo classes should work fine.
waterandwind pro premium priority commented 2 years ago
Hello mlazaru,
thanks for your comment.
Your code is working but you using the CSS variant.
This thread is about the SVG+JS variant of Fontawesome. Therefore, I can't mark your answer as best answer.
mlazaru staff commented 2 years ago
It's a fix to your code where you are already using SVG+JS variant of Fontawesome. Everything in your project will work as it worked before, except for the premium icons, which will not render the buggy, square icons. So the Lightbox icons will remain normal.
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: Desktop-PC
- Browser: Brave, Edge, Firefox and Safari
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes