Das neue Iconfeld ermöglicht die Verwendung der BackdropCMS-Iconsets (Phosphor) über das User-Interface für Felder. Allerdings erst seit Backdrop CMS 1.34.1. Das Iconset selbst ist nicht neu, aber Teile der API dazu, von denen das Modul abhängt, sind es.
Installiert werden kann es wie gewohnt auf admin/modules/install, Suchbegriff "icon field".
Ein naheliegender Anwendungsfall wäre eine kompaktere Ansicht ohne blauen Hintergrund für die mitgelieferten Karten auf der Startseite.
Zuerst ein Iconfeld zum Inhaltstypen "Card" hinzufügen auf admin/structure/types/manage/card/fields
Einstellungen hat der Feldtyp nicht viele, die Eingabe des Alternativtextes kann ausgeschaltet werden oder auch nicht.
Die globalen Einstellungen zur Anzahl der Werte kann auf "1" bleiben (Default-Einstellung).
Komfortable Zuordnung
Im nächsten Schritt ordnen wir den Karten Icons zu, dazu alle drei bearbeiten und das eben erstellte Iconfeld befüllen.
Dabei hilft der Icon-Browser-Dialog.
An der Anzeige auf der Startseite ändert das noch nichts, da das eine Ansicht (View) ist.
Wir müssen also die Ansicht anpassen auf admin/structure/views/view/promoted_cards/configure/block
In dieser Ansicht tauschen wir das vorhandene Bildfeld gegen das Iconfeld.
Speichern und zurück zur Startseite.
Beinahe zufriedenstellend, aber etwas mehr Abstand und die Überschrift wäre besser mittig ausgerichtet.
Zurück zum Bearbeiten der Ansicht, dort setzen wir beim Iconfeld das HTML-Element in den Design-Einstellungen auf "P". Und beim Titel Feld ergänzen wir in den Design-Einstellungen die CSS-Klasse "text-align-center".
Das Ergebnis:
Die Icons folgen der Schriftfarbe, diese Farbe ist aber jederzeit anpassbar mit wenigen Zeilen CSS:
.view-promoted-cards .icon-wrapper {
padding: 1.5em;
background: #e1b13f;
border-radius: 50%;
color: #fff;
}
Ansicht am Inhaltstypen
Selbstverständlich kann die Anzeige auch am Inhaltstypen selbst angepasst werden – wie beim Bildfeld auch. Die Einstellungen sind sehr ähnlich.
"Ich möchte aber einen anderen Iconsatz"
Tatsächlich ist auch Font Awesome so verwendbar. Das Modul muss nur installiert werden und sofort stehen über 2000 weitere Icons zur Auswahl.
Weitere werden dazukommen, sobald mehr Module hook_icon_info() mit einem weiteren Iconsatz implementieren.
Die schiere Anzahl könnte aber mit den über 3000 Icons des Core Iconsatzes etwas zu viel des Guten sein. Und so ähnlich sich Iconsets auch sind, sie passen nicht unbedingt immer perfekt zueinander.
Moduleinstellungen (global)
Zum Glück lässt sich die Auswahl im Dialog einschränken in den globalen Einstellungen des Moduls.
admin/config/user-interface/iconbrowser-dialog
Weitere Ideen
Der Kreativität sind kaum Grenzen gesetzt. Der Feldtyp kann übrigens nicht nur an Inhaltstypen (nodes) angehängt werden, sondern an jede beliebige "Entity", also auch User, Taxonomiebegriffe usw., sind also selbstverständlich auch mit Paragraphs verwendbar.
Beispiel: Icons verwendet wie Initiale am Anfang des Inhalts. Das Iconfeld wird in der Feldliste direkt vor dem Inhalt (body) einsortiert und das Icon links ausgerichtet.
Andere Ansicht, andere Anzeige, aber wieder ein "Grid". Diesmal verlinken die Icons auf den Inhalt (laut Einstellung) und übernehmen die Linkfarbe des Themes.
Ein Großer Vorteil von SVG Icons gegenüber Bildern (wie PNG, WEBP, oder JPG) ist, dass sie die Textfarbe "erben", ohne dass sie extra angepasst werden müssten. Um das zu demonstrieren, hier ein dunkles Theme mit grüner Linkfarbe.
Kommentar hinzufügen