I font di icone sono fantastici per il tuo sito Ecco perché

Hai sentito parlare di icone e hai quasi certamente sentito parlare di font, ma cos'è un Icona Font? Oggi ti mostrerò quali sono i caratteri dell'icona e come utilizzarli per animare il tuo sito web. Iniziamo.

Cosa sono i caratteri icona?

I caratteri icona sono esattamente gli stessi di “regolare” caratteri: definiscono l'aspetto di un testo. La grande differenza qui è che i font di icone non contengono lettere e numeri, ma simboli e icone. Potresti essere confuso da ciò, poiché ciò che è buono è un tipo di carattere se non puoi scrivere lettere a tua madre!

I caratteri icona vengono principalmente utilizzati per lo stile dei siti Web. Poiché sono basati su vettori, possono essere ridimensionati, spostati, modellati e modificati usando CSS 5 Baby Steps to Learning CSS e Diventare un Kick-Ass CSS Sorcerer 5 Passi per imparare CSS e diventare un Kick-Ass CSS Sorcerer CSS è il le ultime pagine web di cambiamento più importanti si sono viste nell'ultimo decennio e hanno aperto la strada alla separazione tra stile e contenuto. Nel modo moderno, XHTML definisce la struttura semantica ... Per saperne di più. Ciò offre un enorme vantaggio rispetto ai metodi di progettazione tradizionali come le immagini. L'aspetto di un gran numero di icone può essere modificato con poche righe di codice. Non è necessario modificare alcuna immagine, aprire Photoshop o caricare i nuovi file: basta scrivere il codice.

Iniziare

Userò Font Awesome per questi esempi, ma la teoria può essere applicata a molti altri pacchetti di font.

Ecco l'HTML di avvio:

Questa è la quantità minima di HTML richiesta per produrre una pagina web. Non ne spiegherò la maggior parte, come abbiamo spiegato nella nostra guida su come creare un sito web.

La linea più importante è la seguente:

Questo carica il foglio di stile Font Awesome dal suo CDN. Senza questa linea, il tuo sito web non saprebbe cosa sia Font Awesome, quindi è abbastanza importante. Questo foglio di stile gestisce tutto il duro lavoro di incorporare i caratteri web e generalmente rende le cose molto più semplici per te.

Font Le icone Awesome sono definite dalle classi CSS aggiunte a io tag. Questi sono stati scelti in quanto non hanno alcun browser o stile predefinito associato ad essi, quindi le tue icone non saranno incasinate. In alternativa, puoi aggiungere le classi a campata tag, ma questo ingombra il tuo codice HTML.

Ecco l'utilizzo di base. Metti questo dentro il tuo corpo tags:

 La mia prima icona

Ecco come appare:

Quanto è stato facile? Scopriamolo. Ci sono due classi necessarie per il funzionamento di Font Awesome. Il primo è chiamato fa, che sta per Font Awesome. Questo è necessario per qualsiasi icona, indipendentemente da quale si utilizza. La seconda classe specifica l'icona particolare che desideri utilizzare: potrebbe essere qualsiasi cosa, un aereo, una persona o una carta di credito. Anche questo è preceduto da fa, e siccome questa è un'icona a forma di ingranaggio, il suo nome è Fa-Cog. È possibile visualizzare un elenco di tutte le icone in Font Awesome sul loro sito web.

Prova a cambiare l'icona dall'ingranaggio a qualsiasi altra.

Going Deeper

Una volta che conosci le basi, è il momento di alcuni trucchi avanzati.

Se non vuoi scrivere il tuo CSS, puoi usare gli stili compilati direttamente in Font Awesome. Esistono molte classi che puoi utilizzare per ingrandire le icone:

Un'altra classe utile da usare è la Fa-spin. Questo ti farà ruotare le icone e, quando combinato con le precedenti classi di dimensioni, puoi produrre alcuni effetti piacevoli. Ecco il codice:

Ecco il risultato:

È facile ruotare le icone - usa il fa-rotazione classe:

Il numero alla fine definisce i gradi di rotazione dell'icona, ma non lasciarti trasportare. Sei limitato a 90, 180, o 270.

Un ultimo trucco che puoi fare è accatastare. Il fa-stack classe ti consente di combinare due o più icone insieme. Ecco il codice:

Ecco come appare:

Una volta che inizi a combinare tutte queste varie classi, le possibilità sono davvero infinite.

CSS personalizzato

Perché i caratteri delle icone sono appena tipi di carattere, puoi modificarli con i CSS come faresti con qualsiasi altro elemento. Usare un po 'di CSS3 può fare molto:

Ecco l'HTML per quell'icona:

Ecco il CSS:

@keyframes move from margin-left: 0;  a margin-left: 400px;  .bike nome-animazione: sposta; durata animazione: 4s; 

Questo CSS è piuttosto semplice, ma ha un grande impatto. Questo non è un tutorial CSS, quindi potresti voler imparare CSS I prossimi passi sulla strada per diventare un master Jedi CSS I prossimi passi sulla strada per diventare un CSS Jedi Master CSS è assolutamente una delle tecnologie più importanti in circolazione su Internet oggi e mentre la maggior parte delle persone ammette di conoscere un po 'di HTML, in genere non sappiamo nulla dei CSS. L'ultima volta che ti ho presentato ... Leggi di più se vuoi saperne di più sul funzionamento interno.

Puoi fare alcune cose speciali se vuoi davvero:

Questo balbetta un po 'per ridurre le dimensioni del file per il web. Ecco l'HTML:

Ecco il CSS:

@keyframes fade from opacity: 0;  a opacità: 1;  .person opacity: 0; nome-animazione: dissolvenza;  # p1 color: red; durata dell'animazione: 2 secondi;  # p2 color: orange; durata animazione: 4s;  # p3 color: green; durata animazione: 6 secondi;  # p4 animation-duration: 8s; 

Come nell'esempio precedente, utilizza le animazioni CSS3. Un'animazione chiamata dissolvenza viene creato e l'icona di ogni persona implementa questa animazione con tempi diversi. C'è un sacco di potenziale per scatenarsi con queste icone e CSS3.

È tutto per oggi. Ora dovresti essere in grado di usare Icon Fonts per ravvivare il tuo sito web! Se non sei ancora sicuro delle tue capacità, dai un'occhiata a questi siti di template CSS 11 Siti di template CSS: Do not Start From Scratch! 11 Siti di template CSS: Do not Start From Scratch! Ci sono migliaia di modelli CSS gratuiti disponibili online, che abbracciano le tendenze e le tecnologie del design moderno. Puoi usarli nella loro forma originale, o personalizzarli per renderli tuoi. Per saperne di più, o questi canali YouTube per iniziare Vuoi saperne di Web design? 7 canali YouTube per iniziare Hai bisogno di imparare il web design? 7 canali YouTube per farti conoscere YouTube ha migliaia di video e canali per i principianti del web design. Qui guardiamo alcuni dei migliori per iniziare. Leggi di più con il web design.

Hai imparato qualcosa di nuovo oggi? Qual è il tuo Carattere Icona preferito? Fateci sapere nei commenti qui sotto!

Scopri di più su: CSS, HTML, Web Design.