Verwendung: Verwendung von Icon eye in password field

sven's Avatar

sven

17 Oct, 2024 09:19 PM

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

  1. Support Staff 1 Posted by RockSolid Theme... on 18 Oct, 2024 08:53 AM

    RockSolid Themes's Avatar

    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. 2 Posted by sven on 18 Oct, 2024 09:57 AM

    sven's Avatar

    Hi,
    aber hier sehe ich doch das eye-Icon:
    https://tao.demo.rocksolidthemes.com/icons
    Beste Grüße,
    Sven

  3. Support Staff 3 Posted by RockSolid Theme... on 21 Oct, 2024 08:50 AM

    RockSolid Themes's Avatar

    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. 4 Posted by sven on 21 Oct, 2024 11:17 AM

    sven's Avatar

    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.

  5. Support Staff 5 Posted by RockSolid Theme... on 21 Oct, 2024 01:56 PM

    RockSolid Themes's Avatar

    Um das Icon im Passwort-Feld zu platzieren, können Sie z. B. folgenden CSS-Code verwenden:

    .widget-password::after {
        position: absolute;
        right: 1em;
        bottom: 1em;
        content: "\e073";
        font: 1em/1 "RockSolid Icons";
    }
    
  6. 6 Posted by sven on 21 Oct, 2024 08:27 PM

    sven's Avatar

    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

  7. Support Staff 7 Posted by RockSolid Theme... on 22 Oct, 2024 09:55 AM

    RockSolid Themes's Avatar

    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. 8 Posted by sven on 24 Oct, 2024 06:31 PM

    sven's Avatar

    Vielen Dank für die Unterstützung, jetzt klappt alles wie gewünscht.
    Beste Grüße
    Sven

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

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