Icons für Immobiliendaten
WP-ImmoMakler bringt einen eigenen Satz von Linien-Icons für Immobiliendaten mit, zum Beispiel einen Kalender für das Baujahr, einen Grundriss für die Zimmer oder einen Standort-Pin für die Adresse. Die Icons sind als SVG direkt in die Seite eingebettet: Sie laden keine zusätzlichen Dateien oder Schriften und übernehmen die Textfarbe ihrer Umgebung.
Wo die Icons erscheinen
Abschnitt betitelt „Wo die Icons erscheinen“- In den Eckdaten-Boxen von Elementor, Bricks, WPBakery, Divi 4 und Divi 5 sowie im Block „Eckdaten-Boxen“ des Website-Editors.
- In der Eckdaten-Icon-Liste von Divi 5 und im Block „Eckdaten-Icon-Liste“ des Website-Editors.
- In der Eckdaten-Icon-Liste von Elementor. Bei jedem Eintrag wählen Sie unter Icon-Quelle zwischen der Standardbibliothek mit den Icons von WP-ImmoMakler und Elementor für ein Icon aus der Elementor-Bibliothek. Ein neu eingefügtes Widget verwendet die Standardbibliothek; in bestehenden Widgets bleiben die bisher gewählten Icons erhalten.
- In der Standard-Darstellung ohne Page Builder an der Ortsangabe am Titel, etwa „22391 Hamburg, Reihenhaus“: in der Detailansicht und in der Listenansicht mit dem Layout „Kompakt“.
Strichstärke und Form einstellen
Abschnitt betitelt „Strichstärke und Form einstellen“Im Backend Ihrer Website (wp-admin) unter WP-ImmoMakler → Einstellungen → Darstellung legen Sie im Abschnitt Icons fest, wie alle Icons gezeichnet werden:
- Strichstärke der Icons: „Fein“, „Leicht“, „Normal“ oder „Kräftig“. „Fein“, „Normal“ und „Kräftig“ entsprechen den Schnitten Thin, Light und Regular von Font Awesome, „Leicht“ liegt zwischen „Fein“ und „Normal“. Nutzt Ihr Theme oder Page Builder Font Awesome, wählen Sie dieselbe Stärke, damit beide Icon-Arten gleich kräftig wirken. Voreingestellt ist „Normal“.
- Form der Icons: „Rund“ zeichnet Linienenden und Ecken abgerundet, „Eckig“ mit geraden Linienenden und spitzen Ecken. Im eckigen Stil erhalten auch die Rahmen von Kalender und Stellplatz-Icon spitze Ecken.
Die Einstellungen gelten für alle Page Builder und die Standard-Darstellung gleichzeitig. Farbe und Größe der Icons stellen Sie wie bisher im jeweiligen Element Ihres Page Builders ein.
Die Strichstärke können Sie zusätzlich für ein einzelnes Element abweichend festlegen: In den Eckdaten-Boxen von Elementor, Bricks, WPBakery und Divi 5, in der Eckdaten-Icon-Liste von Elementor und Divi 5 sowie in den Blöcken „Eckdaten-Boxen“ und „Eckdaten-Icon-Liste“ gibt es dafür das Feld Strichstärke der Icons. Voreingestellt ist Wie in den Einstellungen. Die Form gilt immer für die ganze Website.
Automatische Icon-Wahl
Abschnitt betitelt „Automatische Icon-Wahl“Steht ein Element auf „Automatisch (nach Feld)“, wählt WP-ImmoMakler das Icon passend zum Datenfeld:
| Datenfeld | Icon |
|---|---|
| Baujahr, Verfügbar ab, Letzte Modernisierung | Kalender |
| Wohnfläche, Nutzfläche und weitere Flächen | Quadrat mit Diagonalpfeil |
| Grundstücksfläche | Baum auf Grundstück |
| Gartenfläche | Baum |
| Anzahl Zimmer | Grundriss |
| Stellplätze | P im Quadrat |
| Kaufpreis, Mieten und weitere Preisfelder | Geldbörse |
| Objektart | Haus |
| Adresse | Standort-Pin |
Für Felder ohne eigenes Icon, etwa Schlafzimmer, Badezimmer, Etage oder Energieausweis, verwendet WP-ImmoMakler weiterhin Icons im Stil von Lucide. Sie folgen derselben Strichstärke und Form.
Für Entwickler: eigene Icons und Anpassungen
Abschnitt betitelt „Für Entwickler: eigene Icons und Anpassungen“Mit dem Filter immomakler_property_field_icons ergänzen oder ersetzen Sie Icons. Hinterlegen Sie nur die Pfade ohne <svg>-Element, gezeichnet auf einem Raster von 24 × 24 als Linien. Füllungen und feste Farben werden nicht unterstützt, weil Farbe und Strich vom umgebenden <svg>-Element kommen.
add_filter( 'immomakler_property_field_icons', function ( $icons ) { $icons['pool'] = [ 'label' => __( 'Pool', 'my-theme' ), 'svg' => '<path d="M2 17h20M2 21h20"/>', ]; return $icons;} );Mit immomakler_property_field_icon_map ordnen Sie einem Datenfeld ein Icon für die automatische Wahl zu, zum Beispiel $map['hat_pool'] = 'pool';.
Mit immomakler_property_field_icon_style setzen Sie Strichstärke und Form per Code, unabhängig von der Einstellung im Backend. Erlaubt sind Strichstärken größer als 0 und bis 4:
add_filter( 'immomakler_property_field_icon_style', function ( $style ) { $style['stroke'] = '2'; $style['form'] = 'sharp'; return $style;} );Jedes Icon trägt die CSS-Klasse immomakler-icon. Strichstärke und Form stehen als Attribute am <svg>-Element, sodass Sie sie für einzelne Bereiche auch per CSS überschreiben können, etwa mit stroke-width: 2.25;.