Verwendung: Verwendung von Icon eye in password field
Produkt: Tao Contao
Contao-Version: 4.13.49
Browser und Browserversionen: Chrome Version 129.0.6668.90 (Offizieller Build) (arm64)
Hi,
ich habe eine Webseite auf Basis von TAO realisiert und würde gerne zB beim Registrierungsformular im Password-Feld das Icon eye einblenden um dann per Klick jeweils den type des input fields zwischen password und text zu wechseln.
Ich scheitere aber schon daran, dass eye icon per CSS dem input field hinzuzufügen.
Habt ihr da einen Tipp zur Vorgehensweise?
Vielen Dank und beste Grüße
Sven
Keyboard shortcuts
Generic
? | Show this help |
---|---|
ESC | Blurs the current field |
Comment Form
r | Focus the comment reply box |
---|---|
^ + ↩ | Submit the comment |
You can use Command ⌘
instead of Control ^
on Mac
Support Staff 1 Posted by RockSolid Theme... on 18 Oct, 2024 08:53 AM
Vielen Dank für Ihre Frage.
Ein solches Auge-Symbol ist im Theme nicht vorgesehen. Eventuell können Sie die Implementierung im Backend von Contao als Inspiration verwenden. Dort ist bei allen Passwort-Feldern eine solche Funktion zu finden, z. B. in den Profileinstellungen des Benutzers.
2 Posted by sven on 18 Oct, 2024 09:57 AM
Hi,
aber hier sehe ich doch das eye-Icon:
https://tao.demo.rocksolidthemes.com/icons
Beste Grüße,
Sven
Support Staff 3 Posted by RockSolid Theme... on 21 Oct, 2024 08:50 AM
Ja, ein Auge-Symbol ist im Icon-Font enthalten, aber die Funktion damit das Passwort eines Passwort-Eingabefeldes anzeigen zu lassen ist im Theme nicht integriert. Eine solche Funktion ist aber im Backend von Contao zu finden.
4 Posted by sven on 21 Oct, 2024 11:17 AM
Genau, und ich möchte jetzt das Icon per CSS in ein password-input-Feld in einem Formular einblenden, so dass ich es per JS nutzen kann.
Und dabei fehlt mir die Info, WIE ich das Icon per CSS mit :after und content einfügen kann.
Support Staff 5 Posted by RockSolid Theme... on 21 Oct, 2024 01:56 PM
Um das Icon im Passwort-Feld zu platzieren, können Sie z. B. folgenden CSS-Code verwenden:
6 Posted by sven on 21 Oct, 2024 08:27 PM
cool, jetzt kommen wir der Sache näher.
Wo finde ich die codes für die Icons?
Irgendwo hatte ich schon einen Hinweis in der Online Doku gesehen, aber nicht verstanden worauf er verweist.
Vielen Dank für Deine Unterstützung!
Beste Grüße,
Sven
Support Staff 7 Posted by RockSolid Theme... on 22 Oct, 2024 09:55 AM
Normalerweise finden Sie die Codes in einer HTML-Datei im Fonts-Ordner des Themes: https://tao.demo.rocksolidthemes.com/files/tao/fonts/rocksolid-icons.html
Auf Ihrer Website wurde der Icon-Font jedoch modifiziert und die Icon-Codes sind nun auf Ihrem Webspace unter /files/tao/fonts/rocksolid-icons.css zu finden.
8 Posted by sven on 24 Oct, 2024 06:31 PM
Vielen Dank für die Unterstützung, jetzt klappt alles wie gewünscht.
Beste Grüße
Sven