Icons
Mit dem Shortcode
[icon icon="solid camera-retro"] können Icons im Inhaltsbereich der eigenen Seite hinzugefügt werden.RRZE Elements | Icons auf Inhaltsseiten einbinden
Shortcode-Attribute
Die folgenden Attribute stehen zur Verfügung:
color="#000000"- Steuert die Farbe des Icons. Der Wert wird entweder als Universitätskürzel (phil | rw | nat | tf | med), oder als HEX-Farbwert angegeben (z.B. #000000).
icon="solid heart-pulse"- Steuert das verwendete Icon. Alle Icons aus der Font-Awesome 6 Linie können verwendet werden. Der Setname muss vor dem Iconnamen angegeben werden. Bei Icons aus der Reihe “Solid” kann der Setname weggelassen werden.
style="2x"- Steuert die Größe des Icons. Akzeptiert die Werte 2x | 3x | 4x | 5x. Ohne das Attribut wird der Wert 1x verwendet.
style="border"- Erzeugt einen Rahmen um das Icon.
style="pull-left"oderstyle="pull-right"- Stellt das Icon links oder rechts neben einem Text dar.
alt=""- Vergibt einen Alternativtext für das Icon. Ohne Angabe des Parameters werden Icons auf aria-hidden=”true” gesetzt.
Einfache Umsetzungsbeispiele
Icons in Texten einbinden
Icons können sowohl in Überschriften, als auch in Texten eingebaut werden:
Ein Icon kann als einfaches Symbol mithilfe des Shortcodes eingebunden werden. Man kann das Icon auch in den Text einbauen.
Ein Icon kann als einfaches [icon icon="solid bath"] Symbol mithilfe des Shortcodes eingebunden werden. Man kann das Icon auch in den [icon icon="solid pencil"] Text einbauen.
Icons in einer Liste oder Überschrift einfügen
- Badewanne
- Holzhammer
Icons neben Absätzen einbinden
Dann ist sie müde; und weil das Wasser unermüdlich ist, läßt sie sich treiben. Den klugen und stolzen Kopf bergwärts gewendet, fließt sie unter der hohen Wölbung föhnigen Himmels, durch gilbende Bergwiesen, zwischen brennenden Ahornen, schwarzen Fichten und glühenden Buchen ins tiefere Land hinaus.
Den Mann hat sie nicht mehr gesehen. Vielleicht ist er noch droben bei der Nestgrube, denn es kamen jüngere Lachsfrauen in den letzten Tagen. Sie ist nie eifersüchtig gewesen; es ist so Brauch in ihrer Sippe. Vielleicht hat ihn der Mensch erschossen oder erdolcht. Sie kennt das alles, und es bewegt sie nicht. Sie ist nur müde und ein wenig traurig. Dieses Gefühl ist immer in ihr, wenn sie nach der großen Hochzeitslust meerwärts zieht. Sie sehnt sich aus den harten Gewässern nach der sanften Umwellung des Meeres.
[icon icon="solid ship" style="5x, border, pull-left"]Dann ist sie müde...
Dann ist sie müde; und weil das Wasser unermüdlich ist, läßt sie sich treiben. Den klugen und stolzen Kopf bergwärts gewendet, fließt sie unter der hohen Wölbung föhnigen Himmels, durch gilbende Bergwiesen, zwischen brennenden Ahornen, schwarzen Fichten und glühenden Buchen ins tiefere Land hinaus.
Den Mann hat sie nicht mehr gesehen. Vielleicht ist er noch droben bei der Nestgrube, denn es kamen jüngere Lachsfrauen in den letzten Tagen. Sie ist nie eifersüchtig gewesen; es ist so Brauch in ihrer Sippe. Vielleicht hat ihn der Mensch erschossen oder erdolcht. Sie kennt das alles, und es bewegt sie nicht. Sie ist nur müde und ein wenig traurig. Dieses Gefühl ist immer in ihr, wenn sie nach der großen Hochzeitslust meerwärts zieht. Sie sehnt sich aus den harten Gewässern nach der sanften Umwellung des Meeres.
[icon icon="solid ship" style="5x, border, pull-right"]Dann ist sie müde...
Kombination verschiedener Shortcodes
Im folgenden Umsetzungsbeispiel wurden gleich mehrere Shortcodes verwendet, um das gewünschte Ergebnis zu erzielen. In einem Alert [alert color="#000000" font="light"]...[/alert] wurde ein [icon icon="solid exclamation-triangle" color="#ffffff" style="5x, border"]-Shortcode gesetzt. Dieser wird gefolgt von einem [divider], dem unsichtbaren Trenner und mehreren Spalten, die mit einem [columns number="2"]…[/columns]-Shortcode erstellt wurden.
Umgang mit Chemikalien
»Ich bin da! Ich bin da!« Das eiskalte Wasser schoß ihm durch die Kiemen, als er den Kopf aus der Eihaut gebracht hatte und den ersten Atemzug tun mußte. Das kleine Maul stand ihm vor Schreck offen. Dann führte die Strömung die Eihaut hinweg, und er gewahrte sich als winziges Geschöpf, durchsichtig wie das Wasser, schmal und bläßlichbraun wie ein Weidenblatt im Herbst.
Sicherheit im Labor
»Ich bin da! Ich bin da!« Das eiskalte Wasser schoß ihm durch die Kiemen, als er den Kopf aus der Eihaut gebracht hatte und den ersten Atemzug tun mußte. Das kleine Maul stand ihm vor Schreck offen. Dann führte die Strömung die Eihaut hinweg, und er gewahrte sich als winziges Geschöpf, durchsichtig wie das Wasser, schmal und bläßlichbraun wie ein Weidenblatt im Herbst.
Der Code hinter der Beispielumsetzung oben
[divider]
[alert color="#000000" font="light"]
[icon icon="solid exclamation-triangle" color="#ffffff" style="5x, border"]
[divider]
[columns number="2"]
[column]
Umgang mit Chemikalien
»Ich bin da! Ich bin da!« Das eiskalte Wasser schoß ihm durch die Kiemen, als er den Kopf aus der Eihaut gebracht hatte und den ersten Atemzug tun mußte. Das kleine Maul stand ihm vor Schreck offen. Dann führte die Strömung die Eihaut hinweg, und er gewahrte sich als winziges Geschöpf, durchsichtig wie das Wasser, schmal und bläßlichbraun wie ein Weidenblatt im Herbst.
[/column]
[column]
Sicherheit im Labor
»Ich bin da! Ich bin da!« Das eiskalte Wasser schoß ihm durch die Kiemen, als er den Kopf aus der Eihaut gebracht hatte und den ersten Atemzug tun mußte. Das kleine Maul stand ihm vor Schreck offen. Dann führte die Strömung die Eihaut hinweg, und er gewahrte sich als winziges Geschöpf, durchsichtig wie das Wasser, schmal und bläßlichbraun wie ein Weidenblatt im Herbst.
[/column]
[/columns]
[/alert]