Si vous avez l’habitude de créer votre propres icônes web, vous devez connaître Icomoon. Pour un projet client utilisant déjà FontAwesome, j’ai eu besoin d’ajouter 2 icônes personnalisées provenant en utilisant le service Icomoon.

Pour cet article, j’ai utilisé Icomoon mais vous devriez pouvoir adapter, vous inspirer de cet article pour insérer n’importe quel icône personnalisé.

Les icônes FontAwesome étaient utilisées sur des éléments de menu grâce à Advanced Custom Fields et Advanced Custom Fields: Font Awesome Field. le but est donc d’ajouter à la liste des icônes FontAwesome, mes 2 ou 3 icônes customs d’icomoon.

Afficher les icones Icomoon dans le champs ACF FontAwesome

Advanced Custom Fields: Font Awesome Field que je nommerai dorénavant ACFFA propose un filtre permettant de venir modifier la liste des icônes:

ACFFA_get_icons
add_filter( 'ACFFA_get_icons', 'cot_test' );
function cot_test( $icons ) {
$icomoon = array(
'cierge' => array(
'name' => 'cierge',
'hex' => '\e90e',
'unicode' => ''
),
'calice' => array(
'name' => 'calice',
'hex' => '\e90f',
'unicode' => ''
),
);
foreach ( $icomoon as $ico ) {
$icons['list']['far'][ 'far ' . $ico['name'] ] = '<i class="icon-' . $ico['name'] . '"></i> ' . ucfirst(
$ico['name'] );
$icons['details']['far']['far ' . $ico['name']]['hex'] = $ico['hex'];
$icons['details']['far']['far ' . $ico['name']]['unicode'] = $ico['unicode'];
}

return $icons;
}

Ici nous filtrons la liste existantes des icônes FA pour y ajouter nos icônes personnalisées. Malheureusement, l’extension de Matt Keys étant développées pour FA, seules les catégories FontAwesome sont disponible à savoir Brand (fab), Regular (far), Style (fas). J’ai décidé d’ajouter mes icônes dans les Regular soit Far. Ceci est purement arbitraire.

Décortiquons le code ci-dessus

array(
'cierge' => array(
'name' => 'cierge',
'hex' => '\e90e',
'unicode' => '&#xe90e;'
),

Ici je déclare les icônes Icomoon que je vais vouloir utiliser:

  • name: le nom de l’icône dans la liste
  • hex: le code hexadécimal fourni par Icomoon
  • unicode: l’unicode de l’icône Icomoon

Ensuite, avec une boucle foreach, je vais alimenter le tableau $icons contenant les icônes FontAwesome

Afficher les icônes en back-office

Pour afficher les icônes en back-office, il va falloir que la feuille CSS Icomoon avec toutes les icônes soient chargées coté back-end.

Pour ça, nous allons ajouter ce code:

add_action( 'admin_print_styles', 'cot_load_icomoon_css' );

Si vous êtes habitués a développer vos thèmes vous connaissez le hook d’action WordPress wp_enqueue_scripts qui permet de charger des feuilles de styles et des scripts en front-end. Sachez qu’il existe aussi un équivalent pour le back-office et il se nomme admin_print_styles.

add_action( 'admin_print_styles', 'cot_load_icomoon_css' );
add_action( 'wp_enqueue_scripts', 'cot_load_icomoon_css', 9, 1 );
function cot_load_icomoon_css(){
wp_enqueue_style( 'font-icomoon', get_template_directory_uri() . '/css/iconmoon.css');
}

Ici je charge donc la feuille CSS en front et en back-office.

J’ai mis une priorité 9 au chargement front afin de passer juste avant le chargement de la feuille de style du thème et de pouvoir par la suite les utiliser dans mon thème. Par défaut un add_action() à une priorité de 10.

Afficher les icônes en front office

En front-office, l’extension ACF FontAwesome retourne un balisage HTML formaté pour FA (normal!). Nous, on veut que dans certains cas, celui de notre icône personnalisée on aille charger une autre police (celle générée par Icomoon).

Icomoon m’a fourni 4 fichiers de polices de caractères ( .eot, .svg, .ttf et .woff) que j’ai placé dans mon projet. Le fichier icomoon.css fait un @font-face afin que les polices soient chargées

Le problème réside dans le fait que l’extension de Matt Keys génère un markup HTML FA et qu’il va falloir « ruser » pour détourner le fonctionnement seulement pour les icônes Icomoon. Et oui, on veut pouvoir continuer à utiliser normalement FontAwesome!

<i class="far cierge" aria-hidden="true"></i>

On retrouve la class far de FA qui va charger la police FontAwesome puis la class cierge générée à partir du nom données dans la liste des extension a insérer.

Pour que le site charge ma police au lieu de celle de FontAwesome, j’ai créé une feuille CSS modifiant le style des ces classes:

.far.cierge:before {
font-family: "ma-police-icomoon";
content: "\e90e";
}

Pour chaque icône personnalisée je demande à WordPress de charger ma-police-icomoon et d’utiliser le contenu ayant le code hex corespondant à mon icône.

6 commentaires sur “Ajouter des icônes personnalisées à vos projets avec ACF et ACF: FontAwesome Field

  • Fabien

    Bonjour !

    Votre tuto est super et c’est exactement ce dont j’ai besoin mais je ne sais pas ou modifier les bouts de code dont vous faîtes référence.

    Dois-je créer un nouveau fichier php dans mon thème enfant ?
    Dois-je éditer l’un des fichiers php de l’extension ACFFA ?

    Merci pour votre réponse !

  • Quentin

    Bonjour Sébastien

    Merci pour ce tutoriel.
    J’essaie de comprendre comment votre install WP connait l’origine de vos icônes.
    Je peux créer un set d’icon Icomoon, mais ensuite comment l’installer ? et ou ?
    Par exemple, ou se trouve votre icône cierge ?

  • Julien

    Bonjour, très bon tuto !
    Je l’ai suivi à la lettre et je bloc à la toute dernière partie, mon icon s’affiche en carré. Je pense que cela vient de cette ligne CSS : font-family: « ma-police-icomoon »;
    Je ne vois pas par quoi remplacer « ma-police-icomoon » et ou récupérer cette info ?

    Merci par avance !

    • Sebastien Serre

      Icomoon vous a fourni un fichier CSS « icomoon.css ». À l’intérieur il a donné un nom à votre police.
      Il y a un premier bloc du type:
      @font-face {
      font-family: 'ma-police-icomoon';
      src: url('../fonts/ma-police-icomoon.eot?ywth1d');
      src: url('../fonts/ma-police-icomoon.eot?ywth1d#iefix') format('embedded-opentype'), url('../fonts/ma-police-icomoon.ttf?ywth1d') format('truetype'), url('../fonts/ma-police-icomoon.woff?ywth1d') format('woff'), url('../fonts/ma-police-icomoon.svg?ywth1d#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
      }

      ou `ma-police-icomoon` est remplacé par le nom de votre police.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *