Intégrer et personnaliser Font Awesome dans PrestaShop

Pourquoi utiliser Font Awesome plutôt que des images

Font Awesome est une bibliothèque d'icônes vectorielles rendues via une police de caractères (ou des SVG). Son principal avantage par rapport aux images classiques est la performance : une seule police remplace des dizaines de fichiers PNG ou SVG individuels, réduisant les requêtes HTTP et le poids total de la page.

Les icônes Font Awesome sont :

• **Vectorielles** : elles s'adaptent à toutes les tailles d'écran sans perte de qualité
• **Stylables en CSS** : couleur, taille, ombre, animation — tout se contrôle via les propriétés CSS habituelles
• **Légères** : un seul fichier de police pour des centaines d'icônes
• **Accessibles** : possibilité d'ajouter des attributs `aria-hidden` et des labels pour les lecteurs d'écran

Utiliser une icône Font Awesome via CSS (méthode pseudo-élément)

La méthode la plus souple pour afficher une icône Font Awesome dans PrestaShop consiste à utiliser un pseudo-élément CSS ::before ou ::after. Cette approche ne nécessite aucune modification des fichiers de template.

.mon-element::before {
    font-family: "FontAwesome";
    content: "\f003"; /* Code Unicode de l'icône souhaitée */
    font-size: 16px;
    color: rgba(0, 0, 0, 0.39);
    margin-right: 5px;
    font-weight: normal;
    font-style: normal;
}

Comment trouver le code Unicode d'une icône

Chaque icône Font Awesome possède un code Unicode unique. Pour le trouver :

1. Rendez-vous sur le [site officiel Font Awesome](https://fontawesome.com/icons)
2. Recherchez l'icône souhaitée (par exemple `envelope`, `graduation-cap`, `shopping-cart`)
3. Sur la page de l'icône, repérez le code Unicode affiché (par exemple `f003` pour l'enveloppe)
4. Dans votre CSS, préfixez-le d'un antislash : `content: "\f003";`

Exemples d'icônes courantes pour le e-commerce

/* Panier */
.cart-icon::before {
    font-family: "FontAwesome";
    content: "\f07a";
}

/* Utilisateur / Mon compte */
.account-icon::before {
    font-family: "FontAwesome";
    content: "\f007";
}

/* Recherche */
.search-icon::before {
    font-family: "FontAwesome";
    content: "\f002";
}

/* Téléphone */
.phone-icon::before {
    font-family: "FontAwesome";
    content: "\f095";
}

Charger ou mettre à jour Font Awesome dans votre thème

PrestaShop 1.6 et 1.7 intègrent nativement Font Awesome 4.x. Si vous avez besoin d'une version plus récente ou si votre thème personnalisé ne charge pas la police, il faut déclarer la @font-face manuellement.

Déclaration @font-face (Font Awesome 4.x)

Dans le fichier CSS principal de votre thème (ou un fichier CSS dédié), ajoutez :

@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot');
    src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/fontawesome-webfont.woff2') format('woff2'),
         url('../fonts/fontawesome-webfont.woff') format('woff'),
         url('../fonts/fontawesome-webfont.ttf') format('truetype'),
         url('../fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Évite le FOIT (Flash of Invisible Text) */
}

Important : Vérifiez que le chemin ../fonts/ correspond bien à l'emplacement réel des fichiers de police dans votre thème. L'arborescence type est :

themes/votre-theme/
├── assets/
│   ├── css/
│   │   └── custom.css
│   └── fonts/
│       ├── fontawesome-webfont.woff2
│       ├── fontawesome-webfont.woff
│       └── fontawesome-webfont.ttf

Mise à jour vers Font Awesome 6 (recommandé en 2025)

Font Awesome a considérablement évolué depuis la version 4. Sur PrestaShop 8.x, il est recommandé de migrer vers Font Awesome 6 pour bénéficier de milliers d'icônes supplémentaires et d'un poids réduit.

Méthode 1 : Via CDN (rapide)

Dans votre fichier themes/votre-theme/templates/_partials/head.tpl :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" 
      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" 
      crossorigin="anonymous" referrerpolicy="no-referrer" />

Méthode 2 : En local (recommandé pour la performance)

Téléchargez Font Awesome 6 depuis le site officiel, puis enregistrez-le dans votre thème via le fichier themes/votre-theme/assets/js/theme.js :

// Dans votre fichier themes/votre-theme/config/theme.yml
assets:
  css:
    all:
      - id: font-awesome
        path: assets/css/fontawesome/all.min.css
        priority: 100

Attention aux changements de nommage

En Font Awesome 6, le font-family a changé :

/* Font Awesome 4 */
font-family: "FontAwesome";

/* Font Awesome 6 - Icônes solid */
font-family: "Font Awesome 6 Free";
font-weight: 900;

/* Font Awesome 6 - Icônes regular */
font-family: "Font Awesome 6 Free";
font-weight: 400;

/* Font Awesome 6 - Icônes brands */
font-family: "Font Awesome 6 Brands";
font-weight: 400;

Optimiser les performances

Charger l'intégralité de Font Awesome pour n'utiliser que 10 icônes est un gaspillage. Voici les bonnes pratiques :

1. Ne charger que les styles nécessaires

Font Awesome 6 sépare ses fichiers CSS par famille. Si vous n'utilisez que des icônes solid, ne chargez que solid.min.css au lieu de all.min.css.

2. Utiliser le subsetting avec Font Awesome Kits

Le site officiel propose des "Kits" qui ne contiennent que les icônes que vous utilisez réellement. C'est la solution la plus performante.

3. Passer aux SVG individuels

Pour un nombre limité d'icônes (moins de 15), préférez des SVG inline plutôt que de charger toute une police. Dans PrestaShop 8.x avec un thème moderne :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16">
    <path fill="currentColor" d="M502.3 190.8c3.9-3.1..." />
</svg>

4. Ajouter font-display: swap

Toujours inclure font-display: swap dans votre déclaration @font-face pour éviter que le texte soit invisible pendant le chargement de la police.

Où placer vos personnalisations CSS dans PrestaShop 8.x

Évitez de modifier directement les fichiers du thème par défaut. Privilégiez :

• **Thème enfant** : créez un thème enfant et surchargez uniquement le CSS nécessaire
• **Module custom** : un petit module qui injecte un fichier CSS via le hook `displayHeader`
• **Back-office** : dans **Apparence > Thème et logo > Personnalisation avancée**, certains thèmes proposent un champ CSS personnalisé

// Exemple : module qui charge un CSS personnalisé
public function hookDisplayHeader()
{
    $this->context->controller->registerStylesheet(
        'mon-module-fontawesome',
        'modules/mon_module/views/css/custom-icons.css',
        ['media' => 'all', 'priority' => 200]
    );
}