Font Awesome und Button

  • [FONT=lucida sans unicode]Hi Leute,[/FONT]
    [FONT=lucida sans unicode]
    [/FONT]
    [FONT=lucida sans unicode]ich versuche den Text "SENDEN" durch ein FontAwesome-Icon zu ersetzen.[/FONT]
    [FONT=lucida sans unicode]
    [/FONT]
    [FONT=lucida sans unicode]Der Button wird von einem Plugin namens "MailChimp for WordPress" erstellt. Ich habe bereits versucht den Text "SENDEN" durch "<i class="icon-envelope"></i>" zu ersetzen, was ja normalerweise der Befehl zum Ansteuern des FontAwesome-Plugins ist. Funktioniert aber nicht.[/FONT]
    [FONT=lucida sans unicode]
    [/FONT]
    [FONT=lucida sans unicode]Hat jemand eine Idee und kann mich auf den Pfad der Erleuchtung führen?[/FONT]

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Das ist nicht so einfach.

    Du müßtest das CSS vom Newsletter-Plugin erweitern, hier die Klasse für den Button:

    Code
    #mc4wp-form-1 input[type=submit] {
      ...
      font-family: FontAwesome;
    }


    und dann das Zeichen für den Briefumschlag als Button-Text einfügen: 

    Gruß
    Ingo

    Wenn ich helfen konnte, bitte [ Gefällt mir ] klicken. :-)

  • Genau.
    Und dann kannst Du das Zeichen für den Briefumschlag (UTF-Zeichen U+F0E0) als Button-Text einfügen. Dann sollte der Briefumschlag auf dem Button angezeigt werden.

    Gruß
    Ingo

    Wenn ich helfen konnte, bitte [ Gefällt mir ] klicken. :-)

  • Die stehen direkt in der CSS-Datei. Da müssen sie ja bekannt sein, sonst könnten sie ja nicht dargestellt werden. Hier mal ein Ausschnitt:

    Code
    .icon-sort-up:before{content:"\f0de";}
    .icon-envelope:before{content:"\f0e0";}
    .icon-linkedin:before{content:"\f0e1";}

    Das ist die hexadezimale Schreibweise. Das kannst Du hier z.B. unten bei "Escaped Unicode" eingeben, auf [Convert] klicken und dann oben bei "Unicode Character" rauskopieren.

    Gruß
    Ingo

    Wenn ich helfen konnte, bitte [ Gefällt mir ] klicken. :-)

Jetzt mitmachen!

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