Basculer le menu
Changer de menu des préférences
Basculer le menu personnel
Non connecté(e)
Votre adresse IP sera visible au public si vous faites des modifications.

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

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}}
github
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>
github
discord
youtube

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)
discord
twitter Twitter/X Bleu (#1da1f2)
youtube YouTube Rouge (#ff0000)
youtube
twitch Twitch Violet (#9146ff)
twitch
mastodon Mastodon Violet (#6364ff)
mastodon
facebook Facebook Bleu (#1877f2)
instagram Instagram Dégradé multicolore
instagram
linkedin LinkedIn Bleu (#0a66c2)
reddit Reddit Orange (#ff4500)
reddit
tiktok TikTok Noir (#000000)
tiktok
telegram Telegram Bleu (#0088cc)
whatsapp WhatsApp Vert (#25d366)
whatsapp

Développement

Code Plateforme Couleur Exemple
github GitHub Noir (#181717)
github
gitlab GitLab Orange (#fc6d26)
gitlab
bitbucket Bitbucket Bleu (#0052cc)
npm NPM Rouge (#cb3837)
stackoverflow Stack Overflow Orange (#f48024)

Plateformes Minecraft

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

Plateformes de financement

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

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

Voir aussi

  • {{ButtonLink}} – Version complète avec texte et alignement personnalisé (300×80px)
Les témoins (''cookies'') nous aident à fournir nos services. En utilisant nos services, vous acceptez notre utilisation de témoins.