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

  • 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

  • ... 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.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!