[3.2.0]Wo finde ich dieses Icon?

[eumelchen]

Hallo zusammen,

ich würde gern das Icon mit dem man zum ersten ungelesenen Beitrag springen kann, gerne gegen ein größeres Bild tauschen
[ externes Bild ]

Wo finde ich das Bild und wo muss ich evtl. die Größe des neuen Bildes eintragen?

[Lehrling]

Hallo, das ist kein Bild, das ist ein Font, eine Schrift also.
Der dazugehörige Codeabschnitt ist der hier

Code: Alles auswählen

<i class="icon fa-file fa-fw icon-red icon-md" aria-hidden="true"></i>

in der viewforum_body.html (Ordner template von prosilver).
Um die Größe zu verändern, musst du das Stylesheet icons.css (Ordner theme von prosilver) öffnen und folgende Stelle suchen:

Code: Alles auswählen

.icon.icon-md {
	font-size: 10px;
}

Dort musst du nun den Wert bei font-size anpassen. Danach den Cache leeren.

[eumelchen]

OK, es ist kein Bild, kann ich denn einen eigenen Font erstellen und wenn ja, wo und wie?

[Lehrling]

Du brauchst keinen Font zu erstellen. Die Boardversion 3.2.0 liefert standardmäßig font awesome mit. Der Font liegt im Ordner assets/fonts im Hauptverzeichnis.
Die Fontsammlung enthält mehrere hundert Icons. Wenn du das Icon austauschen willst, brauchst du den entsprechenden Codeschnipsel. Den kannst du bei font-awesome finden: http://fontawesome.io/
Geh dort zu Icons und such dir das passende Icon aus. Du klickst auf das Icon und kopierst den Codeschnipsel. Ich habe jetzt mal die Badewanne gewählt. Der entsprechende Codeschnipsel wäre:<i class="fa fa-bath" aria-hidden="true"></i>
Das funktioniert nur, wenn das Icon auch in der forumseigenen Sammlung enthalten ist. Wenn ein Icon nicht angezeigt wird, ist es wahrscheinlich noch sehr frisch und noch nicht Teil der Sammlung deines Forums.
WICHTIG: Grundlegende Syntax

Die Icons werden über das <i> Tag in Verbindung mit der jeweiligen Klasse/Klassenkaskade eingebunden. Zur Bedeutung der wichtigsten Selektoren:

icon: muss immer vorangestellt werden - ersetzt bei Links funktional die Klasse "fa" der originalen FA-Syntax, modifiziert für phpBB

fa-camera-retro: identifiziert das anzuzeigende Icon - zu ermitteln wie unter (2) beschrieben

fa-fw: zusätzliche Formatierungsvorschrift für das Icon. In diesem Falle "fixed width", definiert im FA-CSS-File. Sorgt für eine einheitliche Weite aller so gekennzeichneten Icons.

aria-hidden="true": verhindert die Sprachausgabe durch z.B. Screen Reader und sollte daher bei rein dekorativ verwendeten Icons immer gesetzt werden.

Hier gibt's weitere Infos: https://www.phpbb.de/kb/font_awesome_kurzreferenz

[eumelchen]

Danke, dann versuche ich mal mich durch lesen weiterzubilden.

[Kirk]

Noch ein kleiner Zusatz, wenn du auf die Grafik (topic_unread.gif) links daneben klickst, kommst du auch zum ersten ungelesenen Beitrag.

[eumelchen]

Ich habe ein Problem, wie bzw. womit kann ich eigentlich die verschiedenen Zeichen anschauen?

Gibt es eine Möglichkeit sich alle Zeichen mit Beschriftung anzuschauen?

[Lehrling]

Du kannst die die Icons bei Font Awesome unter Icons anschauen. Die sind nach Kategorien sortiert. http://fontawesome.io/

[eumelchen]

Danke, jetzt habe ich es gefunden!

Wenn man es weiß ist es ganz einfach.

[Melmac]

Vielleicht noch ein kurzer Hinweis:
In phpBB 3.2.0 ist noch die etwas ältere FA-Version 4.4.0 enthalten - ihr fehlen einige Icons, die seither, aktuell ist die Version 4.7.0, hinzugekommen sind und die Du dann leider nicht einsetzen kannst.

Im Cheatsheet findest Du alle Icons aufgelistet plus den Angaben, mit welcher FA-Version sie, beginnend mit 4.0, ins Paket aufgenommen wurden.