Aggiungere un'icona ad un pulsante con CSS può sembrare un dettaglio secondario. In realtà rappresenta una delle tecniche più semplici ed efficaci per migliorare l'usabilità e il design di un'interfaccia utente. Le icone aiutano a comunicare immediatamente la funzione di un pulsante, rendendo l'esperienza utente più intuitiva, moderna e visivamente accattivante.
Come creare pulsanti con icone personalizzate con HTLM e CSS
In questo tutorial vedremo passo dopo passo come aggiungere icone ai pulsanti utilizzando Font Awesome, una delle librerie di icone più diffuse nel mondo del web design. Lo faremo utilizzando HTML, CSS e un pizzico di JavaScript, in modo semplice e chiaro, anche per chi è alle prime armi. Tratteremo i concetti fondamentali, analizzeremo il codice e osserveremo insieme il risultato finale, come in un piccolo laboratorio pratico.
I linguaggi usati per questo esercizio
Per realizzare questo piccolo esercizio utilizzeremo tre tecnologie fondamentali del web:
- HTML
- CSS
- JavaScript (facoltativo): per gestire azioni dinamiche, come ad esempio un messaggio al clic o una semplice animazione.
Useremo inoltre Font Awesome, una delle librerie di icone più popolari e versatili sul web. Funziona attraverso un sistema di classi predefinite, in cui ogni icona è associata a un nome specifico, e basta usare quel nome all'interno di un tag <i>
<i class="fas fa-heart"></i>
<i class="fas fa-arrow-right"></i>
La libreria è suddivisa in stili (come fas
solid
far
regular
fab
Questo sistema rende l'integrazione estremamente veloce e flessibile. Ideale sia per progetti semplici che per interfacce complesse. È particolarmente utile quando si vogliono aggiungere simboli riconoscibili (come frecce, cuori, cestini, ecc.) senza dover creare immagini manualmente.
Al termine dell'esercizio, otterremo un pulsante con un'icona (ovvero una freccia verso destra) posizionata accanto al testo, con uno stile moderno e pulito. Nella versione interattiva potremo anche far comparire un messaggio al clic, utile per simulare un comportamento reale come l'avvio di un download o il passaggio a una nuova pagina.
Il codice HTML del nostro progetto
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Pulsante con icona</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="btn-con-icona">
<i class="fas fa-download"></i> Scarica ora
</button>
<script src="script.js"></script>
</body>
</html>In questa parte di codice HTML è stato innanzitutto configurato il collegamento con i file CSS di stile e con la libreria Awesome inclusa tramite CDN. Successivamente è stato creato un semplice pulsante HTML con una classe btn-con-icona
Al suo interno vi è un elemento <i> con classi Font Awesome (fas per "Font Awesome Solid" e fa-download per l'icona del download), seguito dal testo del pulsante. Questo permette all'icona di essere visualizzata accanto al testo.
Il codice CSS
.btn-con-icona {
background-color: #007BFF;
color: white;
border: none;
padding: 12px 20px;
font-size: 16px;
font-family: sans-serif;
border-radius: 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
transition: background-color 0.3s ease;
}
.btn-con-icona:hover {
background-color: #0056b3;
}
.btn-con-icona i {
font-size: 18px;
}Lo stile rende il pulsante visivamente accattivante, con un bel colore blu, bordi arrotondati e una transizione al passaggio del mouse. L'uso di inline-flex
gap
.btn-con-icona i
Codice JavaScript (opzionale)
Il risultato ottenuto fin ora può essere migliorato ed ottimizzato con un brevissimo script Javascript che aggiunge un'azione al clic sul pulsante.
const pulsante = document.querySelector(".btn-con-icona");
pulsante.addEventListener("click", function () {
alert("Download avviato!");
});Quando l'utente clicca sul pulsante, appare un semplice messaggio "Download avviato!". È un'animazione base, utile come esempio pratico. In un contesto reale, questa azione potrebbe avviare un download o aprire un link.
Risultato finale e commento
Con il codice che abbiamo appena scritto, il risultato sarà un pulsante blu con bordo arrotondato che mostra un'icona di download a sinistra seguita dalla scritta "Scarica ora". Passando il mouse sopra il pulsante, il colore cambierà leggermente per dare un feedback visivo all'utente.
Quando il pulsante viene cliccato, compare un messaggio di conferma semplice ma efficace per testare che l'evento JavaScript funzioni correttamente. Di seguito un'anteprima del risultato:
In questo breve esercizio abbiamo visto come integrare le icone di Font Awesome all'interno di un pulsante, migliorandone sia l'estetica che l'usabilità. Abbiamo esplorato passo dopo passo l'HTML per la struttura, il CSS per lo stile, e infine il JavaScript per l'interazione.
Questo tipo di componente è molto utile nella progettazione di interfacce moderne. I pulsanti con icone sono ormai lo standard su e-commerce, landing page, app e dashboard. L'approccio è altamente personalizzabile, si può cambiare infatti l'icona sostituendo fa-download con un'altra icona Font Awesome (es. fa-arrow-right, fa-heart, fa-trash), cambiare i colori, le dimensioni o aggiungere effetti animati.
