Support Bereich Hier finden Sie Antworten auf alle Fragen zu Ihrem Xobor Forum.
Wählen Sie zunächst einen Hilfe-Bereich.

Icons im V6-template anpassen

Im Gegensatz zu den früheren Templates werden die Foren-Icons im V6 nicht als einzelne Grafik-Dateien hochgeladen, sondern in einer eigenen Schriftart verwaltet. Dies bietet viele neue Möglichkeiten - z.B. können Icons bei Bedarf je nach Endgerät und Schriftgröße "mitwachsen", ohne dabei unschön verzerrt zu werden. Auch können Icons z.B. per CSS in der Größe und Farbe angepasst werden.

Das Problem

Will man nun einzelne Foren-Icons austauschen, kann man dazu nicht einfach ein Grafik in der Administration ändern.

Die Lösung

Eine eigene Icon-Schrift.
Theoretisch könnte man sich eine eigene Schriftart erstellen, die die benötigten Icons enthält und diese dann verwenden. Da die Erstellung einer Schriftart vermutlich für viele Admins etwas zu kompliziert ist, werden die Icons von Fontawesome im Forum automatisch mitgeladen. Es ist daher möglich per CSS-Addon jedes Xobor-Icon durch ein Fontawesome Icon zu tauschen.

Ein Beispiel

Auf der Startseite des Forums gibt es die "Einklappen/Ausklappen"-Pfeile bei den Kategorien. Diese sollen durch neue Icons getauscht werden.
Unter https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free finden sich alle kostenlosen Icons, die im Forum bereits zur Verfügung stehen.

Aus der Liste der Xobor Icons lässt sich erkennen, dass die Icons mit den Klassen "angle-up" und "angle-down" dazu angepasst werden müssen.

1) Zunächst suche ich das neue gewünschte Icon bei FontAwesome

2) In der Detail-Seite des Icons findet sich der "Unicode"-Code für das Icon (in diesem Fall ist das "f107"):


3) Im SCSS-Addon des Forums erstelle ich eine neue CSS-Regel:

4) Fertig - statt dem Xobor icon wird nun das von Fontawesome verwendet!

Tipps:

Klassen wiederverwenden
Sollen mehrere Icons durch die Fontawesome Icons getauscht werden kann man das noch etwas abkürzen:

Andere Schriftarten
Es gibt hunderte so genannte "Iconic Fonts", die Icons bereitsstellen. Wir stellen FontAwesome von Haus aus zur Verfügung, es kann aber natürlich jede beliebige Schriftart verwendet werden. Dazu muss lediglich die externe Schrift eingebunden werden. Z.b. könnte man für den obigen "angle-down" auch ein Icon von Ionic verwenden:

Dazu wird zunächst die Schriftart im Head bereich Addon geladen:

Und dann entsprechend die Icons im CSS-Addon überschrieben:

Selbst erstellen
Wer möchte kann sich auch eine eigene Schriftart für die Foren-Icons erstellen und diese verwenden. Das geht z.B. bei https://app.fontastic.me/