Heute wollen wir in einem kurzen Blog-Post zeigen, wie Ihr die standardmäßig hinterlegten Icons über das Theming (Theme-Designer) ändern könnt.
1. Icon-Font integrieren
Damit Icons angezeigt werden können, muss zunächst die gewünschte Icon-Font (z.B. Font Awesome Free) in der Webseite (HTML) eingebunden werden. Dies geschieht in der Regel mittels folgendem HTML:
<head>
<link rel="stylesheet" href="assets/fontawesome-free/css/all.min.css" />
</head>
Icon-Font im Theme hinterlegen
Die Icon-Komponente von KoliBri kapselt die Icon-Font und muss daher die CSS-Definitionen von den im Design System ausgewählten Icon-Identifier kennen. Dazu muss das CSS aus der gleichen CSS-Datei, wie aus 1., in das Theme kopiert und damit hinterlegt werden.
- Theme-Designer öffnen
- Theme auswählen
- Icon-Komponente auswählen
- Schalter auf Komponent-Styling umstellen
- CSS aus der Icon-Font einfügen und speichern
- Theme in Projekt übernehmen
Standard-Icons im Theme ändern
Das Ändern eines Icons ist ganz einfach, wenn folgendes Prinzip klar ist. Alle Icons werden durch die Web Component kol-icon abgebildet. Diese Komponente exportiert immer den Part icon. Über einen Part kann man auf festgelegte CSS-Eigenschaften innerhalb einer Web Component zugreifen. Exemplarisch sieht das so aus:
kol-icon::part(icon) {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
}
kol-icon::part(icon):before {
content: '😃';
}
Um ein Icon über den Designer zu ändern, sind folgende Schritte zu durchlaufen:
- Theme-Designer öffnen
- Theme auswählen
- Komponente auswählen, wo ein Icon geändert werden soll
- Schalter auf Komponent-Styling umstellen
- Spezifischen Selektor auf ein Icon ermitteln
- Spezifischen Selektor verwenden, um Schriftart und Content anzupassen
- Komponent-CSS speichern
- Theme in Projekt übernehmen
Hier mal ein komplexeres Beispiel für die Pagination:
kol-button::part(icon) {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
}
kol-button.first::part(icon):before,
kol-button.previous::part(icon):before,
kol-button.next::part(icon):before,
kol-button.last::part(icon):before {
content: '😃';
}
FAQ
Warum hängt das Icon im KolIcon etwas tiefer?
Mit der CSS-Definition display: contents; am kol-icon-Tag wird das Icon passend ausgerichtet. Die Ausrichtung der Icon-Komponente innerhalb anderer Komponenten hängt immer von der jeweiligen Verwendung ab.
Warum kann ich die Schriftgröße nicht ändern?
kol-icon::part(icon) {
font-family: 'Font Awesome 6 Free';
font-size: 2rem !important;
font-weight: 900;
}
Der Grund liegt in der font CSS-Definition in der Icon-Font selbst und in der Notwendigkeit, die Schriftgröße bei Icons von Außen setzen übernehmen (erben).
.codicon[class*='codicon-'] {
font: 16px / 1 codicon;
}
:host > i,
:host > i::before {
font-size: inherit !important;
}
Möchte man ein Icon in seiner Größe anpassen, so kann man das einfach von Außen tun.
kol-icon {
font-size: 2rem;
}