¶ LIENS
https://emojipedia.org/
https://gist.github.com/rxaviers/7360908
¶ USER
Peut-on rajouter des icônes dans les titres grâce par exemple aux balises Markdown du type Je l'ai fait mais malheureusement il m'affiche ce que j'ai tapé et non un emoji
¶ ASSISTANT
Oui, on peut mettre des icônes (émoticônes / emoji ou petites images) à l’intérieur d’un titre Markdown, mais cela dépend entièrement du moteur de rendu que vous utilisez :
| Méthode | Fonctionne si… | Exemple de syntaxe |
|---|---|---|
| Emoji Unicode directs | N’importe quel moteur, car c’est juste du texte Unicode. | # 🚀 Mon superbe projet |
Codes “ ” à la GitHub |
Le moteur de rendu implémente la GitHub-Flavored Markdown (GFM) ou un plugin équivalent. | # :rocket: Mon superbe projet |
| Entités HTML | Le moteur accepte le HTML brut. | # 🚀 Mon superbe projet |
Balise <img> (petite image ou SVG) |
Le moteur accepte le HTML brut et n’applique pas de filtrage strict dans les titres. | # <img src="icon.svg" width="18" alt=""> Mon superbe projet |
¶ Pourquoi votre essai affiche littéralement :smile: ?
Le Markdown “pur” (CommonMark) ne transforme pas la séquence :smile: en emoji. Seuls certains sites / générateurs (GitHub, GitLab, JupyterLab, etc.) activent cette substitution via une extension.
Question :
Sur quelle plateforme ou avec quel outil rendez-vous votre fichier Markdown ?
Le comportement varie (GitHub, GitLab, VS Code Preview, Notion, Obsidian, générateur de site statique, etc.). Avec ce détail je pourrai indiquer la méthode exacte ou l’éventuel plugin à activer.
¶ USER
Pour les titres de mes pages dans la plateforme Wikijs en self-hosting., c'est juste pour le titre des pages pour éviter le genre d'icone page blanche comme dans l'exemple entouré en rouge en piece jointe
¶ ASSISTANT
¶ Pourquoi l’emoji n’apparaît-il pas dans l’arborescence ?
Le volet de gauche que vous avez entouré correspond au mode « Site Tree » de Wiki.js :
chaque nœud est rendu avec l’icône générique mdi-file-document-outline (ou fas fa-file selon le jeu d’icônes actif).
Ce composant n’interprète pas le Markdown de la page ; il lit seulement :
- le chemin (
/portfolio/offres/...) - le titre saisi dans la boîte de métadonnées (Page ▶ Titre)
et ajoute automatiquement l’icône “page blanche”. On ne peut donc pas y injecter un emoji ou une icône « en Markdown ».
¶ Trois solutions possibles
| Solution | Avantage | Limitation / effort |
|---|---|---|
| 1. Passer en navigation « Statique » ou « Personnalisée » et choisir une icône par lien | Icône vraie (Font Awesome, Material Design Icons, etc.) affichée avant le titre dans le volet | Il faut construire le menu à la main (ou combiner « Custom » + « Site Tree ») |
| 2. Laisser « Site Tree » mais cacher l’icône par défaut via CSS et mettre l’emoji dans le Titre | Rapide, pas de reconstruction de menu | On triche : on masque l’icône, on s’appuie sur l’emoji du titre |
| 3. Injecter du JS/CSS plus lourd (MutationObserver) pour remplacer les icônes | 100 % flexible | Maintenance et test à chaque mise-à-jour de Wiki.js |
Les deux premières suffisent pour 99 % des cas ; ci-dessous les étapes détaillées.
¶ 1. Navigation statique / personnalisée (recommandé)
- Administration ▶ Navigation
Changez le mode sur Static ou Custom.Le mode Custom affiche à la fois votre menu statique et le Site Tree classique.citeturn22view0
- Cliquez sur + Link
- Sélectionnez la page cible dans le sélecteur.
- Dans le champ Icon, tapez :
mdi-rocket(Material Design)fas fa-rocket(Font Awesome 5)
- Validez.
- (Facultatif) Pour que les icônes FA soient disponibles :
Administration ▶ Theme ▶ Icon Set ▸ choisissez Font Awesome 5 ou Material Design Icons.citeturn23view0 - Enregistrez ; le volet affiche maintenant l’icône choisie devant le titre du lien.
Astuce : vous pouvez créer un menu « Custom » minimal (page d’accueil + quelques pages clés) et laisser les autres pages visibles via le bouton Browse du Site Tree.
¶ 2. Garder le Site Tree mais utiliser un emoji
-
Ouvrez la page → ✏️ Éditer → bouton Page (en haut à droite).
-
Dans Titre, placez l’emoji au début :
🚀 Mon superbe projetLe Site Tree affichera ce texte, emoji compris, à droite de l’icône générique.
-
Masquez l’icône générique par une petite injection CSS :
/* Administration ▶ Theme ▶ CSS Injection */ .navigation-drawer .v-list-item__icon { display: none; }Vous ne voyez plus que l’emoji + le titre.
¶ 3. Remplacer dynamiquement les icônes (option avancée)
Des projets comme wikijs-customization montrent comment, via Code Injection + JavaScript (Mutation Observer), on peut :
- parcourir le DOM du Site Tree,
- détecter le texte du lien,
- injecter une balise
<i class="mdi mdi-rocket">.
C’est puissant mais à réserver si vous devez vraiment automatiser des centaines de pages – car chaque montée de version de Wiki.js peut casser le sélecteur CSS/DOM.
¶ Récapitulatif rapide
- On ne peut pas changer l’icône par page dans le Site Tree natif.
- On peut :
- créer un menu statique/personnalisé avec icônes (solution propre) ;
- ou masquer l’icône et mettre un emoji directement dans le Titre (solution express).
- Activez d’abord le jeu d’icônes voulu dans Theme ▶ Icon Set si vous utilisez Font Awesome ou MDI.citeturn23view0
N’hésitez pas à me dire quelle voie vous préférez : je pourrai détailler les commandes exactes ou le CSS/JS à injecter.
¶ USER
Pour masquer l'icône et mettre un emoji directement, le titre en solution express me convient très bien. Néanmoins, je souhaite rester en mode de navigation arborescence du site. Est-ce possible ? Et si oui, merci de m'indiquer comment puisque je n'ai pas trouvé ou injecté le CSS pour la solution 2. Vu que le CSS n'est actif que lorsqu'on prend un menu de navigation statique ou personnalisé.
¶ ASSISTANT
¶ Oui : on peut rester en « Site Tree » et masquer l’icône par CSS
Le champ Theme ▸ Code Injection ▸ CSS Override est disponible quel que soit le mode de navigation (Site Tree, Static, Custom ou None). Il suffit donc d’y coller une règle qui cache l’icône par défaut, puis de placer votre emoji au début du Titre de la page.
¶ Étape-par-étape
| Étape | Action précise |
|---|---|
| 1. Ouvrir l’admin | Cliquez sur la roue crantée (⚙) ▸ Administration |
| 2. Aller à Theme | Menu latéral : Theme |
| 3. Ouvrir Code Injection | Dans le panneau de droite, onglet CSS Override (ou Overwrite CSS suivant la version) — c’est ici qu’on peut ajouter du CSS global citeturn7view0 |
| 4. Coller le CSS | Copiez / collez le bloc ci-dessous |
| 5. Sauvegarder | Bouton Apply puis actualisez la page (Ctrl + F5) |
¶ CSS à coller
/* Masque l’icône « page blanche » dans le Site Tree */
.v-navigation-drawer .v-list-item__icon:first-child,
.v-navigation-drawer .v-icon.mdi-file-document-outline {
display: none !important;
}
Explications rapides :
.v-navigation-drawercible la colonne latérale..v-list-item__icon:first-childest le conteneur d’icône inséré par Vuetify.- La seconde ligne vise directement l’icône Material Design
mdi-file-document-outline, au cas où elle serait utilisée ailleurs. !importantgarantit que votre règle l’emporte sur les styles embarqués.
¶ Ajouter l’emoji au Titre de la page
- Ouvrez la page ▸ ✏ Editer.
- Cliquez sur le bouton Page (coin haut-droit) pour afficher les Métadonnées.
- Dans Titre, placez votre emoji :
🚀 Mon superbe projet
- Enregistrez.
- Rafraîchissez la page : le Site Tree montre désormais l’emoji + le texte, sans l’icône générique.
¶ Points d’attention
- Cache navigateur : forcez un rechargement complet (Ctrl + F5) ou videz le cache si le style ne s’applique pas tout de suite.
- Autres icônes : si vous utilisez ultérieurement le mode Static ou Custom avec vos propres icônes, retirez simplement la seconde ligne du CSS ou ajoutez un sélecteur plus précis pour ne masquer que
mdi-file-document-outline. - Rollback facile : pour annuler, retournez dans Theme › Code Injection, effacez la règle et validez.
Ainsi, vous conservez la navigation « arborescence » tout en affichant vos emojis sans l’icône de fichier par défaut.
N’hésitez pas si vous rencontrez un point bloquant ou si vous voulez affiner le sélecteur CSS ! citeturn8view0
¶ USER
Que tu m'as indiqué, j'ai rafraîchi la page, mais comme tu peux le voir sur l'image, il y a toujours devant mon titre exemple avec la fusée, ce fameux icône de page blanche qui me gêne et que je souhaite enlever. Peux-tu m'aider ?
¶ ASSISTANT
¶ Pourquoi l’icône est-elle toujours là ?
Sur la capture on voit que :
- le composant v-list-item__icon est bien rendu (Vuetify),
- mais la règle que nous avons injectée n’est pas appliquée (probablement parce que la
classe exacte ou la priorité diffère selon la version de Wiki.js / Vuetify).
Nous allons donc :
- vérifier que la feuille “CSS Override” est bien chargée,
- augmenter la spécificité et couvrir toutes les variantes d’icônes “fichier”.
¶ 1. Vérifier que votre surcharge CSS est bien lue
- Ouvrez n’importe quelle page du wiki.
- F12 pour ouvrir les DevTools ▸ onglet Network.
- Rechargez la page (F5).
Dans la liste, cherchez un fichier dont l’URL se termine par custom.css
ou theme-override.css (le nom exact dépend de la version).- Présent ? - passez à l’étape 2.
- Absent ? - votre CSS n’a pas été sauvegardé ; retournez dans Administration ▸ Theme ▸ CSS Override, collez le code, Apply, puis videz le cache server-side (bouton Clear Cache dans Administration ▸ System).
¶ 2. Nouvelle règle CSS (plus spécifique)
Copiez/collez l’ensemble du bloc ci-dessous dans Theme ▸ CSS Override puis Apply :
/* Masque l’icône « fichier » dans le Site Tree (toutes variantes)
— compatible Vuetify 2.x, MDI et Font Awesome
--------------------------------------------------------------- */
.v-navigation-drawer .v-list-item__icon:first-child,
.v-navigation-drawer .v-list-item__icon:first-child .v-icon,
.v-navigation-drawer .v-icon.mdi-file-document-outline,
.v-navigation-drawer .v-icon.mdi-file-document,
.v-navigation-drawer .v-icon.mdi-file-outline,
.v-navigation-drawer .v-icon.mdi-note-outline,
.v-navigation-drawer .fa-file,
.v-navigation-drawer .fa-file-alt {
display: none !important;
width: 0 !important; /* évite un padding résiduel */
margin: 0 !important;
}
¶ Pourquoi ça marche ?
.v-navigation-drawer .v-list-item__icon:first-child
cache toute la cellule icône.- Les sélecteurs suivants ciblent le
<i>quand il est injecté sans
conteneur intermédiaire (cas observé sur certaines skins). width: 0+margin: 0suppriment l’espace réservé, sinon un “trou” subsiste avant l’emoji.!importantpasse devant les styles inline générés par Vuetify.
¶ 3. Hard-refresh & contrôle
- Ctrl + F5 (Firefox/Chrome) ou Shift + F5 pour forcer le rechargement sans cache.
- Vérifiez le volet :
- l’icône page blanche a disparu,
- l’emoji placé dans Titre est désormais le premier (et seul) visuel.
¶ Si l’icône persiste malgré tout
- Faites clic-droit ▸ Inspecter sur l’icône.
Notez la valeur exacte de l’attributclass(ex.mdi mdi-note-multiple-outlineoulas la-file). - Ajoutez-la à la fin de la liste :
.v-navigation-drawer .v-icon.mdi-note-multiple-outline { display:none !important; }
Sauvegardez • Hard-refresh.
¶ Résumé ultra-court
- Le CSS override fonctionne même en mode Site Tree ; il suffisait de
renforcer le sélecteur. - Après injection et rechargement forcé, l’icône “fichier” disparaît et
seul l’emoji déclaré dans le Titre reste visible.
Dis-moi si les modifications sont bien prises en compte ou si une autre
variante d’icône réapparaît ; on ajustera le sélecteur au besoin.
¶ USER
Je ne sais pas de quel liste tu parles dans :"Ajoutez-la à la fin de la liste :"
¶ ASSISTANT
¶ Où faut-il ajouter la classe repérée ?
Dans ma réponse précédente j’avais donné un bloc CSS :
.v-navigation-drawer .v-list-item__icon:first-child,
.v-navigation-drawer .v-list-item__icon:first-child .v-icon,
.v-navigation-drawer .v-icon.mdi-file-document-outline,
...
.v-navigation-drawer .fa-file-alt {
display: none !important;
width: 0 !important;
margin: 0 !important;
}
Les sélecteurs sont séparés par des virgules : c’est cette « liste » qu’il faut compléter avec le nom exact de l’icône que ton inspecteur affiche.
Sur ta capture l’icône est :
<i class="v-icon notranslate mdi mdi-text-box theme--dark"></i>
Le nom pertinent est donc mdi-text-box (et, selon les thèmes, mdi-text-box-outline).
Il suffit de les ajouter à la fin de la liste, juste avant la { .
¶ Étapes précises
- Administration ▶ Theme ▶ CSS Override
Ouvre le même champ où tu avais déjà collé le CSS. - Localise le bloc que tu avais inséré.
- Ajoute les deux sélecteurs (ou un seul si un seul est présent) comme ceci :
/* Masque les icônes « page » dans le Site Tree */
.v-navigation-drawer .v-list-item__icon:first-child,
.v-navigation-drawer .v-list-item__icon:first-child .v-icon,
.v-navigation-drawer .v-icon.mdi-file-document-outline,
.v-navigation-drawer .v-icon.mdi-file-document,
.v-navigation-drawer .v-icon.mdi-file-outline,
.v-navigation-drawer .v-icon.mdi-note-outline,
.v-navigation-drawer .v-icon.mdi-text-box, /* <— ajouté */
.v-navigation-drawer .v-icon.mdi-text-box-outline, /* <— ajouté (au cas où) */
.v-navigation-drawer .fa-file,
.v-navigation-drawer .fa-file-alt {
display: none !important;
width: 0 !important;
margin: 0 !important;
}
(Tu peux copier-coller le bloc complet ci-dessus pour remplacer l’ancien.)
- Clique sur Apply / Save.
- Recharge la page en vidant le cache du navigateur
(Ctrl + F5 ou Shift + F5).
¶ Comment trouver d’autres noms d’icônes ?
- Clic-droit ▶ Inspecter sur l’icône.
- Dans le panneau HTML, repère l’attribut
classdu<i>.
Chez Vuetify/MDI c’est toujoursmdi xyz. - Copie la partie après
mdi-(ex.text-box-multiple-outline) et ajoute-la
dans le sélecteur :
.v-navigation-drawer .v-icon.mdi-text-box-multiple-outline { display:none!important; }
¶ Résultat attendu
- Le bloc v-avatar contenant l’icône est caché.
- Ton emoji (🚀) reste visible, sans espace vide devant.
- Les autres éléments du Site Tree ne sont pas affectés.
Dis-moi si l’icône a bien disparu ; sinon, indique-moi la valeur exacte du
class que tu vois et on l’ajoutera.
¶ USER
Ca fonctionne, merci.
Ou puis je trouver la liste complete des icones tels que celui de la fusée de ton exemple ?
¶ ASSISTANT
Voici où trouver – et comment utiliser – l’ensemble des icônes compatibles avec Wiki.js :
| Jeu d’icônes | Où parcourir toute la bibliothèque | Exemple « fusée » | Classe à saisir dans Wiki.js |
|---|---|---|---|
| Material Design Icons (MDI) | https://pictogrammers.com/library/mdi/ – moteur de recherche en haut de page. Liste hors-ligne : https://pictogrammers.github.io/@mdi/font/latest/ citeturn0search4 | Page « rocket » citeturn0search0 | mdi-rocket |
| Font Awesome 5/6 Free | https://fontawesome.com/icons – filtre par mot-clé, catégorie ou style (solid, regular, etc.). | Page « rocket » (style solid) citeturn0search5 | fas fa-rocket (ou fa-solid fa-rocket en v6) |
Quel jeu d’icônes est actif ?
Dans Administration ▶ Theme ▶ Icon Set, Wiki.js vous laisse choisir Material Design Icons ou Font Awesome 5 (ou les deux si vous servez vos propres fichiers). Les classes que vous tapez dans un lien de navigation ou dans votre CSS doivent correspondre à ce choix ; sinon l’icône ne s’affichera pas.
¶ Comment chercher rapidement un pictogramme
- Ouvrez la page-liste (lien du tableau ci-dessus).
- Tapez un mot-clé (« rocket », « home », « chart », etc.) dans la barre de recherche.
- Cliquez sur l’icône désirée ; la classe CSS complète (ex.
mdi-rocket) est copiée dans votre presse-papiers ou affichée dans la fiche. - Collez cette classe dans :
- le champ Icon d’un lien de menu (Navigation ▶ Static ou Custom),
- ou votre propre HTML/CSS (ex.
<i class="mdi mdi-rocket"></i>).
¶ Astuces supplémentaires
- Variantes et mots-clés
MDI fourmille de déclinaisons :mdi-rocket-outline,mdi-rocket-launch,mdi-rocket-off… Utilisez le champ de recherche pour explorer. - Taille & rotation (MDI)
Ajoutez la classe utilitairemdi-24px,mdi-36px,mdi-rotate-90, etc. citeturn0search2 - Styles Font Awesome 5/6
fas: solid (plein)far: regularfal: light (Pro)fa-solid/fa-regularen v6.
- Copier directement depuis DevTools
Sur n’importe quelle page Font Awesome ou MDI, clic-droit sur l’icône ▶ Inspecter pour voir la classe exacte.
¶ Quand l’icône ne s’affiche pas
- Vérifiez que le jeu d’icônes choisi dans Theme correspond à la classe que vous utilisez.
- Assurez-vous que la variantes Pro (FA Pro ou MDI-Pro) n’est pas référencée si vous ne possédez pas la licence.
- Contrôlez la console du navigateur : une 404 sur le fichier de police (
.woff2) signale souvent une URL ou un CDN manquant.
En résumé :
Accédez à la bibliothèque (MDI ou Font Awesome), copiez la classe de l’icône désirée, puis collez-la telle quelle dans Wiki.js.
Vous disposez de milliers de pictos prêts à l’emploi pour personnaliser vos menus ou vos pages. Bonne chasse !
¶ USER
...proposé par Wikijs dans les trois familles que tu m'as proposé. Où as-tu récupéré la fusée ? Je peux aller la copier et coller directement l'emoji plutôt que de rentrer le code, je préfère. Peux-tu m'indiquer le lien ?
¶ ASSISTANT
Voici les trois « répertoires » où tu peux copier-coller directement la fusée (ou n’importe quel autre pictogramme) ; il suffit d’ouvrir le lien, cliquer sur l’icône, puis Ctrl + C :
| Catégorie | À quoi ça sert ? | Lien direct vers la fusée |
|---|---|---|
| Emoji Unicode (caractère texte) | Le plus simple : tu copies l’emoji 🚀 comme une lettre. | 🚀 Emojipedia – Rocket → https://emojipedia.org/rocket citeturn0search0 |
| Material Design Icons (SVG / police d’icônes) | Icônes vectorielles utilisées par défaut dans Wiki.js si Icon Set = MDI. | MDI – rocket → https://pictogrammers.com/library/mdi/icon/rocket/ citeturn0search1 |
| Font Awesome 5/6 (SVG / police d’icônes) | Icônes vectorielles si tu as activé Font Awesome dans Theme ▸ Icon Set. | Font Awesome – rocket → https://fontawesome.com/icons/rocket citeturn0search2 |
¶ Comment procéder dans Wiki.js
- Copier l’emoji
- Ouvre le lien Emojipedia (première ligne).
- Clique sur le grand 🚀 (la page le sélectionne déjà) → Ctrl + C.
- Coller dans le Titre de ta page
- Éditer la page → bouton Page (Métadonnées).
- Au début du champ Titre, colle l’emoji :
🚀 Mon superbe projet - Sauvegarde.
- Rafraîchir : l’emoji apparaît maintenant dans le Site Tree (puisqu’on a masqué l’icône “page”).
Astuce : si tu veux d’autres emojis, reste sur Emojipedia ; le site affiche à droite un panneau « Copy » pour chaque caractère.
¶ Besoin d’une icône vectorielle plutôt qu’un emoji ?
- Va sur le lien MDI ou Font Awesome, copie le nom de la classe (
mdi-rocketoufas fa-rocket)
et colle-le dans le champ Icon quand tu ajoutes un lien de navigation
(mode Static ou Custom).
Mais pour ton cas (emoji dans le titre) le lien Emojipedia suffira. Bonne personnalisation !