Icônes pour les données des biens immobiliers

WP-ImmoMakler propose son propre jeu d’icônes en traits pour les données des biens immobiliers, par exemple un calendrier pour l’année de construction, un plan pour les pièces ou un repère de localisation pour l’adresse. Les icônes sont intégrées directement dans la page en SVG : elles ne chargent ni fichiers ni polices supplémentaires et reprennent la couleur de texte de leur environnement.

Où les icônes apparaissent

• Dans les boîtes de données clés d’Elementor, Bricks, WPBakery, Divi 4 et Divi 5, ainsi que dans le bloc « Boîtes de données de référence » de l’éditeur de site.
• Dans la liste d’icônes de données clés de Divi 5 et dans le bloc « Liste d’icônes de données clés » de l’éditeur de site.
• Dans la liste d’icônes de données clés d’Elementor. Pour chaque entrée, sous Source d’icône, vous choisissez entre la Bibliothèque standard avec les icônes de WP-ImmoMakler et Elementor pour une icône de la bibliothèque d’Elementor. Un widget nouvellement inséré utilise la bibliothèque standard ; les widgets existants conservent les icônes choisies jusqu’ici.
• Dans l’affichage standard sans Page Builder, sur l’indication de localisation sous le titre, par exemple « 22391 Hambourg, Maison mitoyenne » : dans la vue détaillée et dans la vue liste avec la mise en page « Compact ».

Régler l’épaisseur de trait et la forme

Dans le backend de votre site web (wp-admin), sous WP-ImmoMakler → Paramètres → Affichage, la section Icônes vous permet de définir comment toutes les icônes sont dessinées :

• Épaisseur de trait des icônes : « Fein » (fin), « Leicht » (léger), « Normal » ou « Kräftig » (épais). « Fein », « Normal » et « Kräftig » correspondent aux styles Thin, Light et Regular de Font Awesome ; « Leicht » se situe entre « Fein » et « Normal ». Si votre thème ou votre Page Builder utilise Font Awesome, choisissez la même épaisseur afin que les deux types d’icônes aient la même intensité. La valeur par défaut est « Normal ».
• Forme des icônes : « Rond » dessine les extrémités de ligne et les angles arrondis, « Carré » avec des extrémités de ligne droites et des angles vifs. Dans le style carré, les cadres des icônes de calendrier et de place de stationnement reçoivent eux aussi des angles vifs.

Les réglages s’appliquent simultanément à tous les Page Builders et à l’affichage standard. La couleur et la taille des icônes se règlent toujours dans l’élément concerné de votre Page Builder.

Vous pouvez en outre définir une épaisseur de trait différente pour un élément précis : dans les boîtes de données de référence d’Elementor, Bricks, WPBakery et Divi 5, dans la liste des icônes de référence d’Elementor et Divi 5, ainsi que dans les blocs « Boîtes de données de référence » et « Liste des icônes de référence », le champ Épaisseur de trait des icônes est prévu à cet effet. La valeur par défaut est Comme dans les réglages. La forme s’applique toujours à l’ensemble du site web.

Choix automatique des icônes

Lorsqu’un élément est réglé sur « Automatique (selon le champ) », WP-ImmoMakler choisit l’icône adaptée au champ de données :

Champ de données	Icône
Année de construction, Disponible à partir de, Dernière modernisation	Calendrier
Surface habitable, surface utile et autres surfaces	Carré avec flèche diagonale
Surface du terrain	Arbre sur un terrain
Surface du jardin	Arbre
Nombre de pièces	Plan
Places de stationnement	P dans un carré
Prix d’achat, loyers et autres champs de prix	Portefeuille
Type de bien	Maison
Adresse	Repère de localisation

Pour les champs sans icône propre, comme les chambres, les salles de bains, l’étage ou le certificat énergétique, WP-ImmoMakler continue d’utiliser des icônes dans le style de Lucide. Elles suivent la même épaisseur de trait et la même forme.

Pour les développeurs : icônes personnalisées et adaptations

Avec le filtre immomakler_property_field_icons, vous ajoutez ou remplacez des icônes. Indiquez uniquement les tracés sans l’élément <svg>, dessinés en traits sur une grille de 24 × 24. Les remplissages et les couleurs fixes ne sont pas pris en charge, car la couleur et le trait proviennent de l’élément <svg> englobant.

add_filter( 'immomakler_property_field_icons', function ( $icons ) {
  $icons['pool'] = [
    'label' => __( 'Pool', 'my-theme' ),
    'svg'   => '<path d="M2 17h20M2 21h20"/>',
  ];
  return $icons;
} );

Avec immomakler_property_field_icon_map, vous associez une icône à un champ de données pour le choix automatique, par exemple $map['hat_pool'] = 'pool';.

Avec immomakler_property_field_icon_style, vous définissez l’épaisseur de trait et la forme par code, indépendamment du réglage du backend. Les épaisseurs de trait autorisées sont supérieures à 0 et jusqu’à 4 :

add_filter( 'immomakler_property_field_icon_style', function ( $style ) {
  $style['stroke'] = '2';
  $style['form']   = 'sharp';
  return $style;
} );

Chaque icône porte la classe CSS immomakler-icon. L’épaisseur de trait et la forme sont définies comme attributs de l’élément <svg>, de sorte que vous pouvez aussi les remplacer par CSS pour certaines zones, par exemple avec stroke-width: 2.25;.

Cela pourrait aussi vous intéresser

• Ajouter la rue et le numéro au sous-titre
• Bloc Liste d’icônes de données clés dans l’éditeur de site
• Personnaliser les templates
• Qu’est-ce que le WP-ImmoMakler Child Skin ?