1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Font Awesome Icons im Widgetbereich verwenden

Dieses Thema im Forum "Plugins und Widgets" wurde erstellt von Koch123, 15. Juli 2013.

  1. Koch123

    Koch123 New Member

    Registriert seit:
    15. Juli 2013
    Beiträge:
    4
    Zustimmungen:
    0
    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: 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ß
     
  2. formateins

    formateins Gast

  3. Koch123

    Koch123 New Member

    Registriert seit:
    15. Juli 2013
    Beiträge:
    4
    Zustimmungen:
    0
    Hey,

    erstmal danke für deine Antwort!
    Aber bitte etwas langsamer habe es noch nicht verstanden. Was sind die Unicode-Werte von Fon Awesome? Sind das solche Werte: ()?
    Und was hat es dann mit dem "\" auf sich?
    Und wie meinst du das:

    Danke schonmal!
     
  4. formateins

    formateins Gast

    \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. ;)
     
  5. Koch123

    Koch123 New Member

    Registriert seit:
    15. Juli 2013
    Beiträge:
    4
    Zustimmungen:
    0
    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:
    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??
     
  6. formateins

    formateins Gast

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

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

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    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/plugins/font-awesome-more-icons/assets/css/font-awesome-ext.css

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

    Koch123 New Member

    Registriert seit:
    15. Juli 2013
    Beiträge:
    4
    Zustimmungen:
    0
    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?
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden