Lightbox control icons are not working with Fontawesome SVG

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

Add comment

Mateusz Lazaru staff answered 1 year ago

0 0 Best answer

Please insert min. 20 characters.

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.

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

waterandwind

20Support score
4Questions 3Answers 0Snippets