[GELOEST] "font-awesome-icon" in Button einfügen ohne Link-Funktion für Text-Lightbox zu verlieren

[stef]

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

Projekte | strategisches Design unter Einbindung in den Entnwicklungsprozess

www.out-of-norm.design

ich möchte, dass sich durch ein verlinktes Symbol eine Text-Lightbox öffnet.

Was ist also das Problem beim Einbinden des Icons in einen Button / oder einem Anchor , so dass die Lightbox noch funktioniert.
hier ist der Link zu meinen verschiedenen Versuchen:

angepasste buttons

Zu Versuch 2:
HTML Code funktioniert - leider kann der nicht von mobilen & Apple-Geräten ausgelesen werden.

Zu Versuch 4:
SVG als img eingebunden - wenn man mit der Mouse am linken Rand des Icons leicht oberhalb der Mitte klickt, wird man mit der Lightbox verlinkt.
=> Unergonomisch! kann ich den klickbaren Bereich vergrößern?

Zu Versuch 5:
SVG eingebunden - wenn man mit der Mouse mittig am oberen Rand des Icons klickt, wird man mit der Lightbox verlinkt.
=> Unergonomisch! kann ich den klickbaren Bereich vergrößern?

Zu Versuch 6:
Font-awesome mittels Button eingebunden - keine Verlinkung mit der Lightbox!

Zu Versuch 7:
Font-awesome mittels Anchor-Tag eingebunden - keine Verlinkung mit der Lightbox!

Was mache ich falsch??? Kann mir jemand helfen?
ich brauche eine Alternative zum html-Code-symbol - da dieses nicht für alle Geräte auslesbar ist!!!

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

 

[basti1012]

Ich würde mal versuchen deinen Button

<button class="info-button" data-target="simpleModal_1" data-toggle="modal" title="Info">
    i
</button>

mit diesem Code zu ersetzen,

<a href="#" class="info-button" data-target="simpleModal_1" data-toggle="modal" title="Info">
     <i class="fa-solid fa-info fa-1x" title="Bilder"></i>
</a>

Darauf achten das data-target den richtigen Inhalt hat
Auf der Schnelle sieht es aus als ob es geht.
Mit etwas CSS sieht es dann auch gut aus.

ul.content-icon a.info-button {
    width: 32px;
    background: rgb(193 197 198);
    color: rgb(47 59 64);
    display: block;
    font-size: 1.5em;
    text-align: center;
    margin-left: 12px;
    border-radius: 5px;
}

Kleinigkeiten wirst du noch anpassen müssen bei der CSS.

 

[stef]

Ich würde mal versuchen deinen Button

<button class="info-button" data-target="simpleModal_1" data-toggle="modal" title="Info">
    i
</button>

mit diesem Code zu ersetzen,

<a href="#" class="info-button" data-target="simpleModal_1" data-toggle="modal" title="Info">
     <i class="fa-solid fa-info fa-1x" title="Bilder"></i>
</a>

Darauf achten das data-target den richtigen Inhalt hat
Auf der Schnelle sieht es aus als ob es geht.
Mit etwas CSS sieht es dann auch gut aus.

ul.content-icon a.info-button {
    width: 32px;
    background: rgb(193 197 198);
    color: rgb(47 59 64);
    display: block;
    font-size: 1.5em;
    text-align: center;
    margin-left: 12px;
    border-radius: 5px;
}

Kleinigkeiten wirst du noch anpassen müssen bei der CSS.

Hallo und Danke für Deine Unterstützung...
Das habe ich schon versucht und leider funktioniert font-awesome weder mit button noch im anchor-tag. Jedenfallst schrumpft der Klickbereich auf dem Icon imens... wenn man mit viel Mühe in die obere linke Ecke klickt, dann öffnet sich die Lightbox...
Deshalb hab ich mich mit dem button abgefunden. jetzt funktioniert die Seite. Auch den Fehler bei den active-Markern konnte ich beheben...
Trotzdem vielen Dank!!!
VG Stef

 

[basti1012]

Habe ich dich irgendwie falsch verstanden?
Weil bei mir Funktioniert der Code den ich in Beitrag 2 Geschrieben habe

https://codepen.io/basti1012/pen/VwGebdV?editors=1100

Wenn du aber trotzdem schon nee Lösung gefunden hast, ist auch ok.

EDIT: Ich glaube ich weiß, was du jetzt meinst . Komischerweise lassen sich die Links nicht anklicken , bzw. nur am Rand des Icons. Den Fehler habe ich noch nicht gefunden.
Edit: Glaube jetzt läuft es