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:

Actual behavior

Actually, the control icons in a lightbox are not working as you can see on that image:

Resources (screenshots, code snippets etc.)

The code



    <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="" crossorigin="anonymous"></script>

    <div class="lightbox" data-mdb-font-awesome="pro">

    <div class="row">

        <div class="col-lg-4">
            <img src=""
                 data-mdb-img="" alt="Table Full of Spices" class="w-100">

        <div class="col-lg-4">
            <img src=""
                 data-mdb-img="" alt="Winter Landscape" class="w-100">

        <div class="col-lg-4">
            <img src=""
                 data-mdb-img="" alt="View of the City in the Mountains" class="w-100">



You may noticed data-search-pseudo-elements in the <script>-tag inside the <head>-tag.

It's described in the official Fontawesome docs:

Mateusz Lazaru staff answered 1 year ago


Try this solution and let me know if it helped.

1.Include fontawesome CSS import:


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.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



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