Modèle:IconButton

📚 Modèle:IconButton

✏️ Documentation 🎨 CSS

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-NJoqkvuJT-u0vce8PBwPd_h3wbg4hKhC': No such file or directory @ error/constitute.c/ReadImage/785. convert: no images defined `PNG:/tmp/transform_bacacfb85f3f.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)

• {{Bandeau}}
• {{Couleur}}
• Aide:Modèles