Vuoi aggiungere l’icona di Instagram al tuo sito senza usare un’immagine PNG? Font Awesome permette di inserire un’icona vettoriale e di applicare il caratteristico gradiente con il solo CSS.
Markup accessibile
L’icona deve essere dentro un link reale, con un’etichetta comprensibile anche a chi non vede l’immagine:
<a href="https://www.instagram.com/tuoprofilo" aria-label="Seguici su Instagram">
<i class="fa-brands fa-instagram" aria-hidden="true"></i>
</a>aria-label descrive il collegamento; aria-hidden evita che lo screen reader legga un simbolo già rappresentato dall’etichetta.
Il gradiente con CSS
.fa-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); background-clip: text; -webkit-background-clip: text; color: transparent; }Il gradiente viene ritagliato sulla forma dell’icona. Se il tema del sito ha già un colore per i link, verifica che questa regola non riduca il contrasto.
Hover e focus da tastiera
a:where(:hover, :focus-visible) .fa-instagram { transform: scale(1.08); }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }Il focus visibile è importante per la navigazione da tastiera. Su smartphone, invece, il link deve essere abbastanza grande da poter essere toccato senza precisione eccessiva.
Errori comuni
- caricare Font Awesome più volte;
- usare l’icona come link senza un’etichetta;
- nascondere il focus per ottenere un effetto più pulito;
- applicare il gradiente a ogni icona del sito con un selettore troppo generico;
- usare un’immagine decorativa senza testo alternativo quando l’immagine comunica un link.
Una guida che le persone e le IA possono capire
Una buona guida tecnica dichiara il risultato, mostra il codice, spiega perché funziona e segnala i limiti. Questa struttura non serve soltanto alla SEO: rende il contenuto più facile da leggere, riutilizzare e sintetizzare anche per i sistemi basati sull’intelligenza artificiale.
Il codice deve essere copiabile, il markup esplicito e il contenuto aggiornato quando cambiano Font Awesome o le regole del progetto.
Un contenuto chiaro è più facile da trovare
Markup esplicito, codice copiabile, spiegazione del risultato e indicazioni per l’accessibilità aiutano il lettore e rendono la guida più comprensibile anche ai motori di ricerca e alle IA.