Comment mettre une icône dans un bouton HTML ?

Réponses rédigées par Antoine
Dernière mise à jour : 2022-09-27 11:27:55
Thèmes : html - bouton - icone
Question

Comment faire pour mettre une icône dans un bouton HTML ?

Réponse

Pour mettre une icône dans un bouton HTML, vous pouvez utiliser la librairie SVG Font Awesome ; elle contient des milliers d'icônes et c'est la solution la plus plébiscitée actuellement.

Voici comment mettre une icône Font Awesome dans un bouton HTML :

<!DOCTYPE html> 
<html> 
<head>
<meta charset="UTF-8">
<title>Comment mettre une icône dans un bouton HTML ?</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<button>
  <i class="fas fa-thumbs-up"></i> Une icône dans un bouton HTML
</button>
</body>
</html>

Remarque : Vous trouverez la dernière version du CDN de Font Awesome via cette page. Elle est à intégrer entre les balises <head> et </head>.