Font Awesome Icons im Widgetbereich verwenden

    Hallo liebe Community,

    ich arbeite gerade an einer Wordpress Seite für meine Auftraggeberin und bin an einem Knackpunkt angelangt.
    Hier erst mal der Link zur Seite: http://www.ichwillweiblichersein.de
    Und zwar möchte Sie im linken und im rechten Widgetbereich, bei den individuellen Menüs die ich erstellt habe, nicht die herkömmlichen Aufzählungszeichen, wie momentan der Kreis, sondern etwas anderes. Hierzu habe ich mir überlegt ein Zeichen von dem Plugin Font Awesome zu verwenden. Das Plugin habe ich schon installiert und es funktioniert. Aber ich scheitere momentan daran ein Zeichen von Font Awesome bei dem individuellen Menü einzubinden.
    Ich habe schon die Stelle im style.css gefunden wo ich das Aufzählungszeichen ändern kann aber wie binde ich nun ein Zeichen von Font Awesome ein?

    Ich wär auch sehr dankbar für eine Lösung!!

    Gruß

    • Gerade eben
    • 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

    \121 wäre bspw. ein Unicode für ein Zeichen.

    Sofern die CSS-Datei mit UTF-8 kodiert ist, kannst Du lokal aus der Font (z. B. über die Zeichentabelle) das Zeichen kopieren und direkt in die CSS-Datei einpflegen. Nicht wundern, wenn dann dort nur ein leeres Rechteck zu sehen ist - der Browser kapiert's trotzdem. ;)

    Servus,
    woher weiß ich den das die CSS-Datei mit UTF-8 kodiert ist? Ist das eine Standardeinstellung?
    Ok also der Schnippsel code der für die Aufzählungszeichen verantwortlich ist, ist dieser hier aus dem stylesheet:

    .widget-area ul ul {
    list-style: circle;
    margin-left: 1.3em;
    }

    Bisher hatte ich den Kreis als Aufzählungszeichen. Jetzt habe ich es mal so versucht wie du es gesagt hast und hab es so umgeschrieben:

    .widget-area ul ul:before {
    content: "\f349";
    }

    Da kommt jetzt aber nur ein Schmarrn raus, wie man es auf der Seite schön sehen kann:
    http://www.ichwillweiblichersein.de
    Vor den Punkten sind jetzt gar keine Aufzählungszeichen mehr und oberhalt ist so ein komisches Kästchen,
    was mach ich den falsch??

    Mit einem richtigen Editor ist das kein Problem (bspw. Notepad++).

    Ohne fundierte CSS-Kenntnisse klappts halt einfach nicht. Soviel dazu.

    Code
    #menu-rechtes-menu li:before {
	content: "+ ";
}

    Funktioniert bei mir ohne Probleme.

    Wenn Du mal in das Stylesheet von Font Awesome reinschaust, findest Du auch die entsprechenden Angaben: http://www.ichwillweiblichersein.de/wp-content/plu…awesome-ext.css

    Und wenn alle Stricke reissen, kann man auch mit einem kleinen Hintergrundbildchen arbeiten. ;)

    Also ich versteh jetzt wie du es meinst und wie man es schreiben muss. Trotzdem kommen bei mir keine Zeichen raus sondern nur dieses komische Kästchen, wie kann man sich das erklären? Font Awesome läuft ja eigentlich problemlos wenn ich die Zeichen in die Texte einbinde...
    Fällt jemand eine Fehlerprognose ein?

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden