[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"theme-db":3,"$fdxBYJNQqxVPDJsMjzGAQ9uKHNxSZXK1MpH9gcGfLFRI":22,"$fKnz2vuX4bZz1LbUTiuFsvSZ3e07l5_5fqNYp4Tzdhi8":61,"megamenu":142,"header-db":198,"$fL2UqXU2SF-JctHaFI5r0ZcG5Lf5Z7xTcRqpRgTWyvj0":211,"footer-db":225},{"theme":4},{"colors":5,"typography":13,"ui":17,"defaultColorMode":21},{"primary":6,"secondary":7,"background":8,"foreground":9,"muted":10,"headerBg":11,"footerBg":12,"topBarBg":9,"topBarText":11},"#4F46E5","#0D9488","#F9FAFB","#111827","#6B7280","#ffffff","#020617",{"fontFamily":14,"fontUrl":15,"baseFontSize":16},"Inter, system-ui, sans-serif","https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;0,800;0,900;1,400;1,700&display=swap","16px",{"borderRadius":18,"contentWidth":19,"shadow":20},"lg","7xl",true,"light",{"title":23,"slug":24,"metaDescription":25,"category":26,"tags":27,"difficulty":34,"psVersions":35,"content":39,"faq":40,"tldr":56,"readingTime":57,"generatedAt":58,"publishDate":58,"relatedArticles":59,"sourceCategory":60},"Icônes disparues et images tronquées sur PrestaShop : diagnostic CSS","icones-disparues-images-tronquees-prestashop-css","Résolvez les problèmes d'icônes manquantes (œil, grille, liste) et d'images produit tronquées sur PrestaShop. Corrections CSS détaillées et bonnes pratiques.","design",[28,29,30,31,32,33],"css","icônes","images produit","font-icons","fiche produit","thème","debutant",[36,37,38],"1.6","1.7","8.x","\u003Ch2>Introduction\u003C\u002Fh2>\n\u003Cp>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.\u003C\u002Fp>\n\u003Cp>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.\u003C\u002Fp>\n\u003Ch2>Comprendre le système d'icônes de PrestaShop\u003C\u002Fh2>\n\u003Ch3>Le mécanisme des font-icons\u003C\u002Fh3>\n\u003Cp>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 \u003Ccode>::before\u003C\u002Fcode> avec la propriété \u003Ccode>content\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>Voici le principe de fonctionnement :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n\u002F* La police d'icônes est déclarée via @font-face *\u002F\n@font-face {\n  font-family: 'FontAwesome';\n  src: url('..\u002Ffonts\u002Ffontawesome-webfont.woff2') format('woff2');\n}\n\n\u002F* Chaque icône mappe un caractère Unicode *\u002F\n.icon-eye::before {\n  font-family: 'FontAwesome';\n  content: \"\\f06e\"; \u002F* Caractère Unicode de l'œil *\u002F\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Quand la propriété \u003Ccode>content\u003C\u002Fcode> est vide (\u003Ccode>content: \"\"\u003C\u002Fcode>) 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.\u003C\u002Fp>\n\u003Ch3>Pourquoi les icônes disparaissent\u003C\u002Fh3>\n\u003Cp>Les causes les plus fréquentes sont :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>**Écrasement CSS par le thème** : une feuille de style du thème redéfinit les sélecteurs `.icon-*::before` avec un `content` vide\u003C\u002Fli>\n\u003Cli>**Minification CSS défectueuse** : certains outils de minification suppriment ou corrompent les caractères Unicode dans les propriétés `content`\u003C\u002Fli>\n\u003Cli>**Conflit de polices** : la déclaration `@font-face` est écrasée ou le fichier de police n'est pas chargé\u003C\u002Fli>\n\u003Cli>**Mise à jour de thème partielle** : les fichiers CSS sont mis à jour mais pas les fichiers de polices associés\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Corriger les icônes disparues\u003C\u002Fh2>\n\u003Ch3>Icône œil (prévisualisation produit)\u003C\u002Fh3>\n\u003Cp>L'icône en forme d'œil sert à la prévisualisation rapide des produits en catalogue. Si elle a disparu, localisez dans votre fichier \u003Ccode>global.css\u003C\u002Fcode> (généralement autour de la ligne 4374 sur le thème par défaut 1.6) la règle suivante :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n\u002F* PROBLÈME : content vide = icône invisible *\u002F\n.icon-eye::before,\n.icon-eye-open::before {\n  content: \"\";\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Remplacez-la par le bon caractère Unicode :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n\u002F* CORRECTION : restaurer le caractère Unicode *\u002F\n.icon-eye::before,\n.icon-eye-open::before {\n  content: \"\\f06e\";\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Icônes de vue grille et liste\u003C\u002Fh3>\n\u003Cp>Le même principe s'applique aux icônes de basculement d'affichage (grille \u002F liste) sur les pages catégories :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n\u002F* Icône vue grille *\u002F\n.icon-th-large::before {\n  content: \"\\f009\";\n}\n\n\u002F* Icône vue liste *\u002F\n.icon-th-list::before {\n  content: \"\\f00b\";\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Vérifiez que ces valeurs \u003Ccode>content\u003C\u002Fcode> 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.\u003C\u002Fp>\n\u003Ch3>Méthode de diagnostic rapide\u003C\u002Fh3>\n\u003Cp>Pour identifier toutes les icônes potentiellement cassées, ouvrez les DevTools de votre navigateur (F12), inspectez l'élément manquant et vérifiez :\u003C\u002Fp>\n\u003Col>\n\u003Cli>**L'élément `::before` existe-t-il ?** → Onglet Elements, déplier le nœud\u003C\u002Fli>\n\u003Cli>**La propriété `content` a-t-elle une valeur ?** → Onglet Computed, chercher `content`\u003C\u002Fli>\n\u003Cli>**La police est-elle chargée ?** → Onglet Network, filtre \"Font\"\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\n\u002F\u002F Vérification rapide en console navigateur\ndocument.querySelectorAll('[class*=\"icon-\"]').forEach(el => {\n  const before = getComputedStyle(el, '::before');\n  if (!before.content || before.content === 'none' || before.content === '\"\"') {\n    console.warn('Icône cassée:', el.className, el);\n  }\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Corriger l'image produit tronquée ou réduite\u003C\u002Fh2>\n\u003Ch3>Le problème de dimensionnement du bloc image\u003C\u002Fh3>\n\u003Cp>Sur la fiche produit, l'image principale peut apparaître anormalement petite ou tronquée lorsque le conteneur \u003Ccode>#image-block\u003C\u002Fcode> possède une largeur maximale trop restrictive.\u003C\u002Fp>\n\u003Cp>La correction se fait dans le fichier \u003Ccode>product.css\u003C\u002Fcode> du thème :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n.pb-left-column #image-block {\n  position: relative;\n  display: block;\n  cursor: pointer;\n  padding: 5px;\n  border: 1px solid #dbdbdb;\n  background: #fff;\n  max-width: 370px; \u002F* Ajuster selon votre mise en page *\u002F\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Le paramètre clé est \u003Ccode>max-width\u003C\u002Fcode>. Sa valeur doit correspondre à la taille maximale de vos images produit configurée dans \u003Cstrong>Préférences > Images\u003C\u002Fstrong> du back-office. Si vos images font 800×800 px mais que \u003Ccode>max-width\u003C\u002Fcode> est à 370px, vous perdez en qualité d'affichage.\u003C\u002Fp>\n\u003Ch3>Adapter le dimensionnement à votre catalogue\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-css\">\n\u002F* Pour des images produit de 600px de large *\u002F\n.pb-left-column #image-block {\n  max-width: 600px;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n\u002F* Responsive : pleine largeur sur mobile *\u002F\n@media (max-width: 767px) {\n  .pb-left-column #image-block {\n    max-width: 100%;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Adaptation pour PrestaShop 1.7 et 8.x\u003C\u002Fh2>\n\u003Ch3>Système d'icônes Material Icons\u003C\u002Fh3>\n\u003Cp>À partir de PrestaShop 1.7, le thème Classic abandonne les icon fonts au profit de \u003Cstrong>Material Icons\u003C\u002Fstrong>. Les classes CSS changent :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\">\n<!-- PrestaShop 1.6 -->\n<i class=\"icon-eye\"><\u002Fi>\n\n<!-- PrestaShop 1.7+ \u002F 8.x -->\n<i class=\"material-icons\">visibility<\u002Fi>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Si des icônes disparaissent sur PrestaShop 8.x, vérifiez que la feuille Material Icons est bien chargée dans le \u003Ccode>\u003Chead>\u003C\u002Fcode> :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\">\n<link href=\"https:\u002F\u002Ffonts.googleapis.com\u002Ficon?family=Material+Icons\" rel=\"stylesheet\">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Ou mieux, hébergez la police localement pour des raisons de performance et de conformité RGPD :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n@font-face {\n  font-family: 'Material Icons';\n  font-style: normal;\n  font-weight: 400;\n  src: local('Material Icons'),\n       url('\u002Fthemes\u002Fvotre-theme\u002Fassets\u002Ffonts\u002FMaterialIcons-Regular.woff2') format('woff2');\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Images produit sur PrestaShop 8.x\u003C\u002Fh3>\n\u003Cp>Le thème Classic de PrestaShop 8.x gère le dimensionnement des images différemment, avec un système responsive natif :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n\u002F* PrestaShop 8.x - thème Classic *\u002F\n.product-cover img {\n  max-width: 100%;\n  height: auto;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Si l'image reste tronquée, vérifiez la régénération des miniatures dans \u003Cstrong>Design > Images\u003C\u002Fstrong> et assurez-vous que le type d'image \"large\" est bien configuré avec les dimensions souhaitées.\u003C\u002Fp>\n\u003Ch2>Bonnes pratiques CSS pour PrestaShop\u003C\u002Fh2>\n\u003Ch3>Où placer vos modifications\u003C\u002Fh3>\n\u003Cp>Ne modifiez jamais directement les fichiers CSS du thème par défaut. Privilégiez :\u003C\u002Fp>\n\u003Col>\n\u003Cli>**Thème enfant** (recommandé) : créez un fichier `custom.css` dans votre thème enfant\u003C\u002Fli>\n\u003Cli>**Module personnalisé** : injectez du CSS via le hook `displayHeader`\u003C\u002Fli>\n\u003Cli>**En dernier recours** : le champ CSS personnalisé si votre thème le propose\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cpre>\u003Ccode class=\"language-php\">\n\u002F\u002F Exemple : injection CSS via un module PrestaShop\npublic function hookDisplayHeader()\n{\n    $this->context->controller->addCSS(\n        $this->_path . 'views\u002Fcss\u002Fcustom-fixes.css',\n        'all'\n    );\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Penser au cache\u003C\u002Fh3>\n\u003Cp>Après toute modification CSS, pensez à :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Vider le cache PrestaShop (**Paramètres avancés > Performances**)\u003C\u002Fli>\n\u003Cli>Forcer la recompilation des fichiers CSS (désactiver\u002Fréactiver la concaténation CSS)\u003C\u002Fli>\n\u003Cli>Vider le cache navigateur (Ctrl+Shift+R)\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cpre>\u003Ccode class=\"language-bash\">\n# Vider le cache PrestaShop en ligne de commande (PS 1.7+\u002F8.x)\nphp bin\u002Fconsole cache:clear --env=prod\n\u003C\u002Fcode>\u003C\u002Fpre>",[41,44,47,50,53],{"q":42,"a":43},"Pourquoi les icônes de mon thème PrestaShop ont-elles disparu après une mise à jour ?","Les mises à jour de thème peuvent écraser les fichiers CSS contenant les définitions d'icônes. Si la propriété CSS `content` des pseudo-éléments `::before` est vidée ou corrompue, les icônes deviennent invisibles. Vérifiez dans les DevTools que chaque classe `.icon-*::before` possède bien un caractère Unicode valide, et que la police d'icônes (Font Awesome, Material Icons) est correctement chargée.",{"q":45,"a":46},"Comment redimensionner l'image principale sur la fiche produit PrestaShop ?","La taille d'affichage de l'image produit est contrôlée par la propriété CSS `max-width` du conteneur `#image-block` (PS 1.6) ou `.product-cover` (PS 1.7\u002F8.x). Ajustez cette valeur pour correspondre à la taille réelle de vos images. Pensez également à régénérer les miniatures dans le back-office après tout changement de dimensions dans Design > Images.",{"q":48,"a":49},"Comment vérifier si une police d'icônes est correctement chargée sur PrestaShop ?","Ouvrez les DevTools du navigateur (F12), allez dans l'onglet Network et filtrez par type \"Font\". Rechargez la page : vous devez voir les fichiers .woff2 ou .woff de votre police d'icônes se charger avec un statut 200. Si le fichier est absent ou en erreur 404, vérifiez le chemin déclaré dans la règle @font-face de votre CSS et assurez-vous que les fichiers de police existent sur le serveur.",{"q":51,"a":52},"Faut-il utiliser des icon fonts ou des SVG sur PrestaShop 8.x ?","Les SVG sont désormais recommandés pour les nouvelles intégrations. Ils sont plus légers, plus nets sur tous les écrans, et ne dépendent pas du chargement d'une police externe. Cependant, le thème Classic de PrestaShop 8.x utilise encore Material Icons (icon font). Si vous travaillez avec le thème par défaut, conservez Material Icons pour la cohérence ; si vous développez un thème sur mesure, privilégiez les SVG inline ou un sprite SVG.",{"q":54,"a":55},"Comment éviter que mes corrections CSS soient écrasées lors d'une mise à jour PrestaShop ?","Utilisez toujours un thème enfant pour isoler vos modifications. Placez vos corrections dans un fichier `custom.css` chargé après les styles du thème parent. Alternativement, créez un module dédié qui injecte le CSS via le hook `displayHeader`. Ainsi, vos personnalisations survivront aux mises à jour du thème ou du CMS.","Les icônes disparues sur PrestaShop sont causées par des propriétés CSS `content` vidées dans les pseudo-éléments `::before` — il suffit de restaurer les bons caractères Unicode. Les images produit tronquées se corrigent en ajustant la propriété `max-width` du conteneur image dans le CSS du thème.",6,"2026-03-21T15:55:13.000Z",[],"PrestaShop pour les développeurs",{"columns":62},[63,79,109,130],{"title":64,"links":65},"Plateforme",[66,70,73,76],{"label":67,"href":68,"external":69},"Offre Starter (2 500 €)","\u002Foffre-starter",false,{"label":71,"href":72,"external":69},"Devenir Ambassadeur","\u002Fambassadeur",{"label":74,"href":75,"external":69},"Modules PrestaShop","\u002Fmodules",{"label":77,"href":78,"external":20},"CodeMyShop.com","https:\u002F\u002Fcodemyshop.com",{"title":80,"links":81},"Le Synedre",[82,85,88,91,94,97,100,103,106],{"label":83,"href":84,"external":69},"L'histoire","\u002Fsynedre",{"label":86,"href":87,"external":69},"Constitution","\u002Fsynedre\u002Fconstitution",{"label":89,"href":90,"external":69},"L'équipe","\u002Fequipe",{"label":92,"href":93,"external":69},"Le réacteur en direct","\u002Freacteur",{"label":95,"href":96,"external":69},"Le Drill (entraînement)","\u002Fdrill",{"label":98,"href":99,"external":69},"Protocole de réunion","\u002Fsynedre\u002Freunion",{"label":101,"href":102,"external":69},"Les agents IA","\u002Fagents-ia",{"label":104,"href":105,"external":69},"La Conduite","\u002Fsynedre\u002Fconduite",{"label":107,"href":108,"external":69},"Charte plateforme","\u002Fsynedre\u002Fcharte",{"title":110,"links":111},"Ressources",[112,115,118,121,124,127],{"label":113,"href":114,"external":69},"Blog","\u002Fblog",{"label":116,"href":117,"external":69},"Academy","\u002Facademy",{"label":119,"href":120,"external":69},"Dictionnaire","\u002Fdictionnaire",{"label":122,"href":123,"external":69},"Expertise PrestaShop","\u002Fexpertise",{"label":125,"href":126,"external":69},"Flywheel","\u002Fflywheel",{"label":128,"href":129,"external":69},"Manifeste","\u002Fmanifeste",{"title":131,"links":132},"À propos",[133,136,139],{"label":134,"href":135,"external":69},"Alexandre Carette","\u002Fa-propos",{"label":137,"href":138,"external":69},"Dossier de presse","\u002Fpresse",{"label":140,"href":141,"external":69},"Contact","\u002Fcontact",{"items":143},[144,153,159,165,173,181,187,192],{"id":145,"type":146,"label":147,"href":123,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":150,"children":151,"psChildren":152},41,"link",{"fr":148},"Expertise",null,0,[],[],{"id":154,"type":146,"label":155,"href":114,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":156,"children":157,"psChildren":158},42,{"fr":113},1,[],[],{"id":160,"type":146,"label":161,"href":75,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":162,"children":163,"psChildren":164},43,{"fr":74},2,[],[],{"id":166,"type":146,"label":167,"href":169,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":170,"children":171,"psChildren":172},44,{"fr":168},"Outils IA","\u002Foutils-ia",3,[],[],{"id":174,"type":146,"label":175,"href":68,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":177,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":178,"children":179,"psChildren":180},45,{"fr":176},"Offre Starter ✨",{"highlight":20},4,[],[],{"id":182,"type":146,"label":183,"href":117,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":184,"children":185,"psChildren":186},46,{"fr":116},5,[],[],{"id":188,"type":146,"label":189,"href":135,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":57,"children":190,"psChildren":191},47,{"fr":131},[],[],{"id":193,"type":146,"label":194,"href":141,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":195,"children":196,"psChildren":197},48,{"fr":140},7,[],[],{"header":199},{"logo":200,"topBar":205,"contactEmail":208,"features":209,"navBar":149},{"src":201,"alt":202,"text":134,"href":203,"class":204},"\u002Flogo-ac.svg","Alexandre Carette — Architecte E-commerce Souverain","\u002F","h-10 w-10",{"message":149,"showLanguages":69,"align":206,"languages":207},"left",[],"contact@alexandrecarette.fr",{"showSearch":69,"showWishlist":69,"showLogin":20,"showContact":69,"showCart":69,"stickyHeader":20,"headerLayout":210},"inline",{"academy":212,"blog":213,"expertise":224},[],[214,218,221],{"title":215,"url":216,"score":156,"type":217},"PrestaShop headless avec Nuxt 3 : pourquoi séparer back et front","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-separation-front-back","blog",{"title":219,"url":220,"score":156,"type":217},"PrestaShop headless : Nuxt 3, pas Next.js — le choix souverain","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-nextjs-souverainete",{"title":222,"url":223,"score":156,"type":217},"Sylius rachète PrestaShop : ce que ça change pour vous","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fsylius-rachat-prestashop-headless-souverainete",[],{"footer":226},{"theme":227,"description":149,"hours":149,"logo":228,"contact":229,"social":230,"bottomBar":240},"dark",{"src":201,"href":203,"alt":134},{"email":149,"phone":149,"address":149,"cta":149},[231,234,237],{"platform":232,"href":233,"label":232},"linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Falexandre-carette\u002F",{"platform":235,"href":236,"label":235},"malt","https:\u002F\u002Fwww.malt.fr\u002Fprofile\u002Falexandrecarette",{"platform":238,"href":239,"label":238},"github","https:\u002F\u002Fgithub.com\u002Fprest4cafe",{"copyright":149}]