Vuoi usare l’icona di TikTok sul tuo sito senza caricare un’immagine PNG? Puoi farlo con Font Awesome e CSS, ottenendo un elemento leggero, scalabile e facile da adattare al design.
Che cosa serve
Servono Font Awesome correttamente caricato nel progetto e un elemento HTML con la classe dell’icona TikTok. L’icona resta vettoriale: non dipende dalla risoluzione dello schermo e non richiede un file immagine separato.
Il markup dell’icona
Inserisci l’icona come elemento semantico all’interno di un link che porti al profilo TikTok:
<a href="https://www.tiktok.com/@tuoprofilo" aria-label="Seguici su TikTok">
<i class="fa-brands fa-tiktok" aria-hidden="true"></i>
</a>L’attributo aria-label descrive il link a chi usa tecnologie assistive. L’icona è decorativa e per questo può essere nascosta agli screen reader.
Il CSS per l’effetto TikTok
.fa-tiktok {
color: #000;
filter: drop-shadow(2px 0 0 #fd3e3e) drop-shadow(-2px -2px 0 #4de8f4);
}Le due ombre colorate ricreano il contrasto visivo tipico dell’icona. Se il sito usa un tema scuro, puoi modificare il colore principale e mantenere comunque i due accenti.
Stato hover e focus
a:where(:hover, :focus-visible) .fa-tiktok { transform: translateY(-2px); }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }Il focus visibile rende il collegamento utilizzabile anche da tastiera. Evita di affidarti soltanto all’hover: su smartphone non esiste e non sostituisce un’etichetta accessibile.
Controlli prima di pubblicare
- verifica che il link porti al profilo corretto;
- controlla il contrasto tra icona e sfondo;
- prova il focus da tastiera;
- verifica che Font Awesome sia caricato una sola volta;
- controlla il risultato su mobile.
Perché una guida chiara viene trovata più facilmente
Una pagina tecnica funziona meglio quando dichiara subito il risultato, mostra il markup, spiega le proprietà usate e chiarisce i limiti. Questa struttura aiuta il lettore, i motori di ricerca e le IA a capire esattamente quale problema risolve l’articolo.
Il design dell’icona conta, ma conta ancora di più che il contenuto sia leggibile, copiabile e verificabile.