Alternative für Unicode-Icon in einem <button>-Tag

snaisy · 19. Februar 2023

Hallo liebe Wissende,

ich habe auf einem Hover-Overlay icons gelegt - die bei Klick zu einer Lightbox führen.

1.) info-Lightbox

2.) Bilderserie (als Lightbox)

3.) Video-Lightbox

2.) + 3.) konnte ich mit Font-awesome-icon umsetzen und es funktioniert

Der link für 1.) zu einer Text-Lightbox liegt auf einem Button (in Anchor wäre mir zwar lieber ... aber durch das javascript ... das ich nicht ganz verstehe, habe ich mich mit Button abgefunden).

leider kann ich kein font-awesome-icon in den Button einbinden... jedenfalls ist die klickbareFläche dann sehr winzig in der oberen linken Ecke des Icons. Aus diesem Grund habe ich mich für ein Unicode-symbol entschieden... Funktioniert!!!! aber leider nur für PC...

Nach dem Upload habe ich festgestellt... das das Symbol weder auf Android, apple-iphone oder Fairphone funktioniert

hier ist der Link zur Seite

Datenschutz | Out of Norm

Außerdem funktioniert der Isotope-Filter nicht sauber:

1.) zwar funktioniert die Filterfunktion

2.) aber im Menü switched der active-Marker nicht... beim Untersuchen konnte ich das feststellen > siehe Anhang: to-do-filtermenue.jpg

kann mir bitte jemand helfen?

Viele Grüße

Steffi

nextuser · 28. Februar 2023

Hi Steffi,

das mit dem Filtermenü hast du ja schon erledigt.

Das mit dem Unicode-Symbol auch?

Denn beim mir (Android 8 => Firefox) wird das Symbol angezeigt...

nextuser · 28. Februar 2023

Zitat von snaisy

... in Anchor wäre mir zwar lieber ... aber durch das javascript ... das ich nicht ganz verstehe, habe ich mich mit Button abgefunden ...

Naja, der Javascript-Teil ist einfach nur ein Event, welcher durch data-toggle & data-target gesetzt wird:

Code

if (target.hasAttribute('data-toggle') && target.getAttribute('data-toggle') == 'modal') {
            if (target.hasAttribute('data-target')) {
                var m_ID = target.getAttribute('data-target');
                document.getElementById(m_ID).classList.add('open');
                e.preventDefault();
            }
        }

Dein Button hat als data-target "simpleModal_1", welches halt die ID der Text-Lightbox ist.

Wird drauf geklickt, ergänzt obiges Event einfach ein "open" in die Klassenliste.

Das kannst du problemlos wie die anderen beiden als Link mit einem inneren i-Tag setzen.

Alternative für Unicode-Icon in einem <button>-Tag

Jetzt mitmachen!

Teilen

Tags