Topic: Lightbox control icons are not working with Fontawesome SVG via JS

waterandwind priority asked 1 year ago


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


Mateusz Lazaru staff answered 1 year ago


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


Mateusz Lazaru staff commented 1 year 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.



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: Desktop-PC
  • Browser: Brave, Edge, Firefox and Safari
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: Yes