Icônes disparues et images tronquées sur PrestaShop : diagnostic CSS

Introduction

Deux symptômes récurrents sur les boutiques PrestaShop perturbent régulièrement les marchands : des icônes qui disparaissent mystérieusement (l'œil de prévisualisation, la grille, la vue liste) et des images produit dont la taille d'affichage semble réduite ou tronquée. Ces deux problèmes, bien que distincts, partagent une cause commune : des règles CSS mal configurées ou écrasées par une personnalisation de thème.

Cet article détaille le diagnostic et la correction de ces deux anomalies, avec des solutions applicables de PrestaShop 1.6 jusqu'aux versions 8.x.

Comprendre le système d'icônes de PrestaShop

Le mécanisme des font-icons

PrestaShop 1.6 utilise une police d'icônes (icon font) inspirée de Font Awesome et Bootstrap Glyphicons. Chaque icône est en réalité un caractère Unicode rendu via la pseudo-classe CSS ::before avec la propriété content.

Voici le principe de fonctionnement :

/* La police d'icônes est déclarée via @font-face */
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.woff2') format('woff2');
}

/* Chaque icône mappe un caractère Unicode */
.icon-eye::before {
  font-family: 'FontAwesome';
  content: "\f06e"; /* Caractère Unicode de l'œil */
}

Quand la propriété content est vide (content: "") ou contient un caractère invalide, l'icône disparaît purement et simplement du rendu visuel, sans générer d'erreur dans la console.

Pourquoi les icônes disparaissent

Les causes les plus fréquentes sont :

• **Écrasement CSS par le thème** : une feuille de style du thème redéfinit les sélecteurs `.icon-*::before` avec un `content` vide
• **Minification CSS défectueuse** : certains outils de minification suppriment ou corrompent les caractères Unicode dans les propriétés `content`
• **Conflit de polices** : la déclaration `@font-face` est écrasée ou le fichier de police n'est pas chargé
• **Mise à jour de thème partielle** : les fichiers CSS sont mis à jour mais pas les fichiers de polices associés

Corriger les icônes disparues

Icône œil (prévisualisation produit)

L'icône en forme d'œil sert à la prévisualisation rapide des produits en catalogue. Si elle a disparu, localisez dans votre fichier global.css (généralement autour de la ligne 4374 sur le thème par défaut 1.6) la règle suivante :

/* PROBLÈME : content vide = icône invisible */
.icon-eye::before,
.icon-eye-open::before {
  content: "";
}

Remplacez-la par le bon caractère Unicode :

/* CORRECTION : restaurer le caractère Unicode */
.icon-eye::before,
.icon-eye-open::before {
  content: "\f06e";
}

Icônes de vue grille et liste

Le même principe s'applique aux icônes de basculement d'affichage (grille / liste) sur les pages catégories :

/* Icône vue grille */
.icon-th-large::before {
  content: "\f009";
}

/* Icône vue liste */
.icon-th-list::before {
  content: "\f00b";
}

Vérifiez que ces valeurs content correspondent bien à votre police d'icônes. Les codes ci-dessus sont ceux de Font Awesome 4.x, utilisé par défaut sur PrestaShop 1.6.

Méthode de diagnostic rapide

Pour identifier toutes les icônes potentiellement cassées, ouvrez les DevTools de votre navigateur (F12), inspectez l'élément manquant et vérifiez :

1. **L'élément `::before` existe-t-il ?** → Onglet Elements, déplier le nœud
2. **La propriété `content` a-t-elle une valeur ?** → Onglet Computed, chercher `content`
3. **La police est-elle chargée ?** → Onglet Network, filtre "Font"

// Vérification rapide en console navigateur
document.querySelectorAll('[class*="icon-"]').forEach(el => {
  const before = getComputedStyle(el, '::before');
  if (!before.content || before.content === 'none' || before.content === '""') {
    console.warn('Icône cassée:', el.className, el);
  }
});

Corriger l'image produit tronquée ou réduite

Le problème de dimensionnement du bloc image

Sur la fiche produit, l'image principale peut apparaître anormalement petite ou tronquée lorsque le conteneur #image-block possède une largeur maximale trop restrictive.

La correction se fait dans le fichier product.css du thème :

.pb-left-column #image-block {
  position: relative;
  display: block;
  cursor: pointer;
  padding: 5px;
  border: 1px solid #dbdbdb;
  background: #fff;
  max-width: 370px; /* Ajuster selon votre mise en page */
}

Le paramètre clé est max-width. Sa valeur doit correspondre à la taille maximale de vos images produit configurée dans Préférences > Images du back-office. Si vos images font 800×800 px mais que max-width est à 370px, vous perdez en qualité d'affichage.

Adapter le dimensionnement à votre catalogue

/* Pour des images produit de 600px de large */
.pb-left-column #image-block {
  max-width: 600px;
  width: 100%;
  box-sizing: border-box;
}

/* Responsive : pleine largeur sur mobile */
@media (max-width: 767px) {
  .pb-left-column #image-block {
    max-width: 100%;
  }
}

Adaptation pour PrestaShop 1.7 et 8.x

Système d'icônes Material Icons

À partir de PrestaShop 1.7, le thème Classic abandonne les icon fonts au profit de Material Icons. Les classes CSS changent :

<!-- PrestaShop 1.6 -->
<i class="icon-eye"></i>

<!-- PrestaShop 1.7+ / 8.x -->
<i class="material-icons">visibility</i>

Si des icônes disparaissent sur PrestaShop 8.x, vérifiez que la feuille Material Icons est bien chargée dans le :

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Ou mieux, hébergez la police localement pour des raisons de performance et de conformité RGPD :

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
       url('/themes/votre-theme/assets/fonts/MaterialIcons-Regular.woff2') format('woff2');
}

Images produit sur PrestaShop 8.x

Le thème Classic de PrestaShop 8.x gère le dimensionnement des images différemment, avec un système responsive natif :

/* PrestaShop 8.x - thème Classic */
.product-cover img {
  max-width: 100%;
  height: auto;
}

Si l'image reste tronquée, vérifiez la régénération des miniatures dans Design > Images et assurez-vous que le type d'image "large" est bien configuré avec les dimensions souhaitées.

Bonnes pratiques CSS pour PrestaShop

Où placer vos modifications

Ne modifiez jamais directement les fichiers CSS du thème par défaut. Privilégiez :

1. **Thème enfant** (recommandé) : créez un fichier `custom.css` dans votre thème enfant
2. **Module personnalisé** : injectez du CSS via le hook `displayHeader`
3. **En dernier recours** : le champ CSS personnalisé si votre thème le propose

// Exemple : injection CSS via un module PrestaShop
public function hookDisplayHeader()
{
    $this->context->controller->addCSS(
        $this->_path . 'views/css/custom-fixes.css',
        'all'
    );
}

Penser au cache

Après toute modification CSS, pensez à :

• Vider le cache PrestaShop (**Paramètres avancés > Performances**)
• Forcer la recompilation des fichiers CSS (désactiver/réactiver la concaténation CSS)
• Vider le cache navigateur (Ctrl+Shift+R)

# Vider le cache PrestaShop en ligne de commande (PS 1.7+/8.x)
php bin/console cache:clear --env=prod