I caratteri icona sono fantastici per il tuo sito: ecco perché

Annuncio pubblicitario

Hai sentito parlare di icone e quasi sicuramente hai sentito parlare di caratteri, ma cos'è Icona Carattere? Oggi ti mostrerò quali sono i caratteri icona e come puoi usarli per ravvivare il tuo sito web. Iniziamo.

Quali sono i caratteri icona?

I caratteri icona sono esattamente gli stessi dei caratteri "normali": definiscono l'aspetto di un pezzo di testo. La grande differenza qui è che i caratteri icona non contengono lettere e numeri, ma simboli e icone. Potresti esserne confuso, perché a che serve un font se non puoi scrivere lettere a tua madre!

I caratteri icona vengono utilizzati principalmente per lo stile dei siti Web. Essendo basati su vettori, possono essere ridimensionati, spostati, disegnati e modificati usando CSS 5 piccoli passi per apprendere il CSS e diventare uno stregone CSSIl CSS è la singola modifica più importante che le pagine Web hanno visto nell'ultimo decennio e ha spianato la strada alla separazione di stile e contenuto. In modo moderno, XHTML definisce la struttura semantica ... Leggi 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ò Carattere fantastico per questi esempi, ma la teoria può essere applicata a molti altri pacchetti di font.

Ecco l'HTML iniziale:

Questa è la quantità minima di HTML richiesta per produrre una pagina web. Non spiegherò la maggior parte di esso, poiché l'abbiamo trattato 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 cos'è Font Awesome, quindi è abbastanza importante. Questo foglio di stile gestisce tutto il duro lavoro di incorporamento dei caratteri Web e in generale semplifica le cose.

Font Le icone fantastiche sono definite da classi CSS aggiunte a io tag. Sono stati scelti in quanto non hanno browser o stili predefiniti associati, quindi le tue icone non si incasineranno. In alternativa, puoi aggiungere le classi a campata tag, ma ciò ingombra il tuo codice HTML.

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

 La mia prima icona

Ecco come appare:

Quanto è stato facile? Smettiamolo. Ci sono due classi necessarie per far funzionare Font Awesome. Il primo si chiama 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 trattarsi di qualsiasi cosa, un aereo, una persona o una carta di credito. Anche questo ha il prefisso fae poiché si tratta di un'icona a forma di ingranaggio, il suo nome è Fa-Cog. È possibile visualizzare un elenco di tutti i icone in Font Fantastico sul loro sito web.

Prova a cambiare l'icona dal pignone a un altro.

Più profondo

Una volta che conosci le basi, è tempo di fare qualche trucco avanzato.

Se non vuoi scrivere il tuo CSS, puoi usare gli stili integrati 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, se combinato con le classi di dimensioni precedenti, 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 è impilare. Il fa-stack class 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 icona sono appena caratteri, puoi modellarli con CSS proprio come faresti con qualsiasi altro elemento. L'uso di un piccolo CSS3 può fare molto:

Ecco l'HTML per quell'icona:

Ecco il CSS:

@keyframes move {da {margin-left: 0; } a {margin-left: 400px; } } .bike {nome-animazione: move; durata animazione: 4s; }

Questo CSS è abbastanza semplice, ma ha un grande impatto. Questo non è un tutorial CSS però, quindi potresti voler farlo impara i CSS 10 semplici esempi di codice CSS che puoi imparare in 10 minutiVuoi saperne di più sull'uso dei CSS? Prova questi esempi di codice CSS di base per iniziare, quindi applicali alle tue pagine web. Leggi di più se vuoi saperne di più sui meccanismi interni.

Puoi fare alcune cose speciali se vuoi davvero:

Questo fa un po 'balbettare al fine di ridurre le dimensioni del file per il web. Ecco l'HTML:

Ecco il CSS:

@keyframes dissolvenza {da {opacità: 0; } a {opacità: 1; } } .person {opacità: 0; nome-animazione: fade; } # p1 {color: rosso; durata animazione: 2s; } # p2 {color: arancione; durata animazione: 4s; } # p3 {color: verde; durata animazione: 6s; } # p4 {durata animazione: 8s; }

Come nell'esempio precedente, utilizza animazioni CSS3. Un'animazione chiamata dissolvenza viene creato e ogni icona di persona implementa questa animazione con tempistiche variabili. C'è molto potenziale per scatenarsi con queste icone e CSS3.

È tutto per oggi. Ora dovresti essere in grado di utilizzare Icon Fonts per ravvivare il tuo sito web! Se non sei ancora così sicuro delle tue abilità, dai un'occhiata a queste Siti modello CSS 11 siti template CSS: non iniziare da zero!Ci sono migliaia di modelli CSS gratuiti disponibili online, tutti che abbracciano le tendenze e le tecnologie del design moderno. Puoi usarli nella loro forma originale o personalizzarli per renderli tuoi. Leggi di più o questi Canali YouTube per iniziare Vuoi imparare il web design? 7 canali YouTube per iniziareYouTube ha migliaia di video e canali per i principianti del web design. Qui diamo un'occhiata ad alcuni dei migliori per iniziare. Leggi di più con il web design.

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