« Modèle:IconButton » : différence entre les versions

Navigation interactive dans l’historique

Dernière version du 7 février 2026 à 09:52

📚 Modèle:IconButton

Description

Le modèle IconButton crée de petits boutons carrés cliquables avec icône uniquement (48×48px), optimisés pour s'afficher en grille horizontale ou verticale. C'est une version compacte de {{ButtonLink}} conçue pour les réseaux sociaux, liens externes et actions rapides.

Différences avec ButtonLink

Aspect	ButtonLink	IconButton
Usage	Boutons d'appel à l'action principaux	Grilles d'icônes, liens sociaux
Dimensions	300×80px (variable)	48×48px (fixe)
Texte	Oui (gras, sous l'icône)	Non (icône seule)
Alignement	left/center/right	Inline (auto-wrap)
Taille icône	40px	24px
Display	Block (flex)	Inline-flex

Utilisation

Ce modèle crée un bouton carré compact pointant vers n'importe quelle destination (réseaux sociaux, services externes, plateformes de téléchargement, etc.). Les boutons s'alignent automatiquement en ligne et passent à la ligne suivante sur petits écrans.

Syntaxe

{{IconButton
|link        = URL du lien
|logo        = Nom de couleur prédéfinie (optionnel)
|image       = Nom du fichier image (avec extension, optionnel)
|size        = Taille de l'icône (défaut : 24px)
|background  = Couleur d'arrière-plan personnalisée (optionnel)
|alt         = Texte alternatif (optionnel)
}}

Paramètres

Paramètre	Description	Requis	Défaut
link	URL complète ou relative	Oui	-
logo	Nom de couleur/plateforme prédéfinie (voir liste ci-dessous)	Non	gray
image	Nom du fichier image personnalisé (ex : "MonLogo.svg")	Non	ButtonLink-{{{logo}}}.svg
size	Taille de l'icône (format MediaWiki)	Non	24px
background	Couleur d'arrière-plan personnalisée (hex, rgb, nom)	Non	(utilise logo ou défaut)
alt	Texte alternatif pour l'accessibilité	Non	valeur de logo

Lorsque logo est spécifié, le logo et la couleur de la plateforme choisie seront appliqués automatiquement.
Si logo et background sont tous deux spécifiés, background est prioritaire.
Pour créer une grille centrée, entoure les boutons avec : <div style="text-align: center;">...</div>

Exemples

Boutons basiques

{{IconButton|link=https://github.com/user|logo=github}}
{{IconButton|link=https://twitter.com/user|logo=twitter}}
{{IconButton|link=https://discord.gg/invite|logo=discord}}

Grille centrée

<div style="text-align: center;">
{{IconButton|link=https://github.com/user|logo=github}}
{{IconButton|link=https://twitter.com/user|logo=twitter}}
{{IconButton|link=https://discord.gg/invite|logo=discord}}
{{IconButton|link=https://youtube.com/@channel|logo=youtube}}
</div>

Cas d'usage pratiques

Profil utilisateur

'''Mes réseaux :'''
{{IconButton|link=https://github.com/user|logo=github}}
{{IconButton|link=https://gitlab.com/user|logo=gitlab}}
{{IconButton|link=https://stackoverflow.com/users/123|logo=stackoverflow}}

Téléchargements multiples

<div style="text-align: center;">
'''Télécharger sur :'''

{{IconButton|link=https://modrinth.com/mod/example|logo=modrinth}}
{{IconButton|link=https://curseforge.com/minecraft/mc-mods/example|logo=curseforge}}
{{IconButton|link=https://hangar.papermc.io/user/example|logo=hangar}}
{{IconButton|link=https://github.com/user/repo/releases|logo=github-releases}}
</div>

Support/Donation

<div style="text-align: center;">
'''Soutenez le projet :'''

{{IconButton|link=https://patreon.com/creator|logo=patreon}}
{{IconButton|link=https://ko-fi.com/creator|logo=kofi}}
{{IconButton|link=https://paypal.me/creator|logo=paypal}}
</div>

Pied de page wiki

<div style="text-align: center; padding: 20px; border-top: 1px solid #eee;">
'''Rejoignez notre communauté'''

{{IconButton|link=https://discord.gg/example|logo=discord}}
{{IconButton|link=https://github.com/org|logo=github}}
{{IconButton|link=https://twitter.com/handle|logo=twitter}}
{{IconButton|link=https://youtube.com/@channel|logo=youtube}}
</div>

Couleurs prédéfinies

Réseaux sociaux

Code	Plateforme	Couleur	Exemple
`discord`	Discord	Violet (#5865f2)
`twitter`	Twitter/X	Bleu (#1da1f2)
`youtube`	YouTube	Rouge (#ff0000)
`twitch`	Twitch	Violet (#9146ff)
`mastodon`	Mastodon	Violet (#6364ff)
`facebook`	Facebook	Bleu (#1877f2)
`instagram`	Instagram	Dégradé multicolore
`linkedin`	LinkedIn	Bleu (#0a66c2)	linkedin
`reddit`	Reddit	Orange (#ff4500)
`tiktok`	TikTok	Noir (#000000)
`telegram`	Telegram	Bleu (#0088cc)	telegram
`whatsapp`	WhatsApp	Vert (#25d366)

Développement

Code	Plateforme	Couleur	Exemple
`github`	GitHub	Noir (#181717)
`gitlab`	GitLab	Orange (#fc6d26)
`bitbucket`	Bitbucket	Bleu (#0052cc)	bitbucket
`npm`	NPM	Rouge (#cb3837)	Erreur lors de la création de la vignette : The resulting image would be larger than 32767 pixels on either dimension. Librsvg currently cannot render to images bigger than that. Please specify a smaller size. convert: delegate failed `'rsvg-convert' --dpi-x %x --dpi-y %y -o '%o' '%i @ error/delegate.c/InvokeDelegate/1919. convert: unable to open file '/tmp/magick-twA6bbElecLreZXJw1bchGN0bPlZWUqH': No such file or directory @ error/constitute.c/ReadImage/785. convert: no images defined `PNG:/tmp/transform_4197674672f8.png' @ error/deprecate.c/ConvertImageCommand/3366.
`stackoverflow`	Stack Overflow	Orange (#f48024)	stackoverflow

Plateformes Minecraft

Code	Plateforme	Couleur	Exemple
`modrinth`	Modrinth	Vert (#1bd96a)
`curseforge`	CurseForge	Orange (#f16436)	curseforge
`hangar`	Hangar	Bleu (#0089ff)	hangar
`spigot`	Spigot	Orange (#ed8106)	spigot
`paper`	Paper	Bleu (#1a8cff)	paper
`fabric`	Fabric	Beige (#dbd3c8)	fabric
`forge`	Forge	Bleu foncé (#1e2c42)	forge
`neoforge`	NeoForge	Orange (#ff6b35)	neoforge
`quilt`	Quilt	Violet (#8b5cf6)	quilt

Plateformes de financement

Code	Plateforme	Couleur	Exemple
`patreon`	Patreon	Rouge (#ff424d)
`kofi`	Ko-fi	Rouge (#ff5e5b)
`paypal`	PayPal	Bleu dégradé
`stripe`	Stripe	Violet (#635BFF)	stripe
`liberapay`	Liberapay	Jaune (#f6c915)
`opencollective`	Open Collective	Bleu (#7fadf2)

Couleurs sémantiques

Code	Alternative	Couleur	Usage
`primary`	`blue`	Bleu (#3366cc)	Actions principales
`secondary`	`gray`, `grey`	Gris (#72777d)	Actions secondaires
`success`	`green`	Vert (#14866d)	Messages de succès
`danger`	`red`	Rouge (#d73333)	Avertissements, erreurs
`warning`	`yellow`	Jaune (#fc3)	Alertes
`info`	`cyan`	Cyan (#00b8d4)	Informations
`purple`	`violet`	Violet (#6f42c1)	-
`pink`	-	Rose (#d63384)	-
`orange`	-	Orange (#fd7e14)	-
`teal`	-	Turquoise (#20c997)	-
`indigo`	-	Indigo (#6610f2)	-
`black`	-	Noir (#000)	-
`white`	-	Blanc (#fff)	-
`light`	-	Gris clair (#f8f9fa)	-
`dark`	-	Gris foncé (#343a40)	-

Bonnes pratiques

Accessibilité : Le paramètre alt est auto-généré mais peut être personnalisé pour améliorer l'accessibilité
Performance : Les boutons utilisent un seul fichier CSS même avec 20+ boutons sur la page
Responsive : Les boutons passent automatiquement à la ligne sur petits écrans grâce à inline-flex
Cohérence visuelle : Utilise les logos prédéfinis quand possible pour maintenir une apparence uniforme
Espacement : Les boutons ont une marge de 4px pour espacer automatiquement, pas besoin d'ajouter des espaces manuellement

Voir aussi

{{ButtonLink}} – Version complète avec texte et alignement personnalisé (300×80px)

@@ Ligne 1 : / Ligne 1 : @@
 <includeonly><templatestyles src="IconButton/styles.css" />
-<div class="icon-button {{#if:{{{text|}}}|icon-button--text-mode|}}{{#if:{{{logo|}}}| icon-button--{{{logo}}}|}}"{{#if:{{{background|}}}| style="background: {{{background}}};{{#if:{{{width|}}}| width: {{{width}}};|}}{{#if:{{{height|}}}| height: {{{height}}};|}}"|{{#if:{{{width|}}}{{{height|}}}| style="{{#if:{{{width|}}}|width: {{{width}}};|}}{{#if:{{{height|}}}|height: {{{height}}};|}}"|}}}}><span class="icon-button-link">{{#if:{{{text|}}}|[{{{link}}} {{{text}}}]|[{{{link}}} [[Fichier:{{#if:{{{image|}}}|{{{image}}}|{{#ifexist:Fichier:IconButton-{{#if:{{{logo|}}}|{{{logo}}}|gray}}.svg|IconButton-{{#if:{{{logo|}}}|{{{logo}}}|gray}}.svg|ButtonLink-{{#if:{{{logo|}}}|{{{logo}}}|gray}}.svg}}}}|{{{size|80px}}}|link=|alt={{{alt|{{{logo|Bouton icône}}}}}}]]]}}</span></div></includeonly><noinclude>[[Catégorie:Modèle de bouton]]
+<div class="icon-button {{#if:{{{logo|}}}|icon-button--{{{logo}}}|}}"{{#if:{{{background|}}}| style="background: {{{background}}};{{#if:{{{width|}}}| width: {{{width}}};|}}{{#if:{{{height|}}}| height: {{{height}}};|}}"|{{#if:{{{width|}}}{{{height|}}}| style="{{#if:{{{width|}}}|width: {{{width}}};|}}{{#if:{{{height|}}}|height: {{{height}}};|}}"|}}}}>[{{{link}}} [[Fichier:{{#if:{{{image|}}}|{{{image}}}|{{#ifexist:Fichier:IconButton-{{#if:{{{logo|}}}|{{{logo}}}|gray}}.svg|IconButton-{{#if:{{{logo|}}}|{{{logo}}}|gray}}.svg|ButtonLink-{{#if:{{{logo|}}}|{{{logo}}}|gray}}.svg}}}}|{{{size|80px}}}|link=|alt={{{alt|{{{logo|Bouton icône}}}}}}]]]</div></includeonly><noinclude>[[Catégorie:Modèle de bouton]]
 {{Documentation}}
 </noinclude>