L'utilizzo di un font basato su immagini può essere un modo divertente e veloce per implementare le icone sul tuo sito. È un processo estremamente semplice che ti dà la completa libertà di tornare indietro e ridimensionare le tue icone in qualsiasi momento.
Oggi utilizzeremo l'eccellente font Pictos per creare una semplice pagina Web in modo da poter avere un'idea del processo.
Utilizzando un font per icone
L'offerta di design di questa settimana include il fantastico font Pictos, che contiene 96 icone minimali perfette per il web design. Il bello di questo font è che non si ottiene solo una versione stampata, ma una cartella piena di vari formati da utilizzare anche sul web.
Ciò significa che possiamo facilmente usare @ font-face per incorporare il font Pictos in un sito e quindi utilizzare le icone al posto delle immagini. Nel caso in cui sei un po 'confuso su come questo è stato fatto, ho voluto preparare un breve tutorial che seguisse una implementazione di base del font.
Anche se sei un neofita del CSS, questo dovrebbe essere un gioco da ragazzi. In un certo senso, è davvero più facile che lavorare con le immagini! Iniziamo.
HTML e CSS di base
La prima cosa che vuoi fare è avviare un kit base di base con un file HTML e un file CSS. Il codice qui sotto è quello con cui in genere inizio.
CSS
Per piccoli progetti come questo non mi piace fare confusione con resettazioni enormi, se preferisci qualcosa di più ampio, sentiti libero di includerlo.
Corpo CSS
Per il corpo, tutto ciò che dobbiamo fare è impostare la dimensione del carattere di base e applicare un'immagine di sfondo. Volevo qualcosa di sottile ma attraente, quindi naturalmente mi sono fermato a Subtle Patterns e ho scaricato le "lentiggini sottili"? struttura. Questo sito è fantastico e sta rapidamente diventando uno dei miei punti fermi per risorse di progettazione veloci.
Tutto quello che devi fare è applicare il file scaricato sullo sfondo e impostarlo per la ripetizione.
Intro Paragrafo
La prima cosa che aggiungeremo alla pagina è un paragrafo introduttivo. Immaginiamo di costruire una pagina per un'app web chiamata? Anchorrr ?. Con questo in mente, inserisci il seguente codice HTML.
Come puoi vedere, qui non c'è molto, solo un contenitore con un div che contiene un'intestazione e un paragrafo. Facciamo uno stile per apparire belli.
Intro Paragrafo CSS
Per modellare questa sezione, iniziamo applicando una larghezza e un margine al contenitore. Noi usiamo auto margini per centrare il contenitore nel corpo e overflow: nascosto per aiutare a cancellare i galleggianti che useremo.
Successivamente, applichiamo una larghezza al intro div e galleggiamo a sinistra. Ho usato un po 'di stenografia per il font proprietà per mantenere le cose belle e concise. Si noti che il altezza della linea non ha un'unità associata, leggi di più qui.
Come puoi vedere nell'anteprima sopra, in realtà avevo un link nella mia versione, che richiedeva un po 'di stile in più:
The Big Anchor
Successivamente, vogliamo aggiungere una grande immagine di un'ancora, che capita semplicemente di risiedere nel nostro font Pictos. La prima cosa che dobbiamo fare è incorporare il carattere nel nostro CSS, quindi inserire l'ancora nel nostro HTML e, infine, ridisegnarlo in CSS.
Incorpora il carattere Pictos
Fortunatamente, il carattere in realtà viene fornito con uno snippet specifico per questa attività, quindi il nostro lavoro qui è incredibilmente minimo. Tutto quello che devi fare è spostare i file dei font nella cartella del tuo progetto e incollare quanto segue nel tuo file CSS.
Inserisci l'ancora nel tuo codice HTML
Come incorporare il carattere, l'inserimento del personaggio non potrebbe essere più semplice. Tutto quello che dobbiamo fare è guardare attraverso la mappa dei caratteri qui sotto per trovare l'immagine che vogliamo e quindi digitare quella lettera in un paragrafo nel nostro CSS.
Come puoi vedere, l'ancoraggio può essere implementato tramite il carattere minuscolo? A? nel carattere. Ecco come implementiamo questo nel nostro HTML.
Facile vero? Inizialmente apparirà solo in minuscolo? A ?, quindi passiamo al nostro CSS per modellarlo.
Stile l'ancora
Per trasformare la nostra semplice lettera in un'icona, dobbiamo assicurarci che il carattere sia impostato sul font Pictos che abbiamo incorporato in precedenza. Si noti che, poiché questo è in realtà il tipo con cui stiamo lavorando, possiamo posizionare l'ancora verticalmente tramite il altezza della linea proprietà. Ho giocato con alcuni valori diversi fino a quando ho trovato qualcosa che sembrava giusto.
Ho anche applicato alcune funzioni CSS3 per rendere l'ancoraggio piacevole. Un po 'di RGBa mi ha permesso di rendere l'ancora leggermente trasparente e un bianco text-shadow dà un tocco di effetto tipografico.
Con quello, la nostra sezione superiore sta sembrando abbastanza buona! La nostra ancora è a posto e funziona perfettamente.
Linea di divisione
Prima di iniziare la sezione successiva, voglio creare una chiara divisione visiva con una linea continua. Poiché il contenuto che abbiamo appena esposto è racchiuso in un bel contenitore, questo è abbastanza facile da fare con un semplice bordo.
Come con l'icona di ancoraggio, ho combinato il bottom-border con un'ombra per dargli un po 'più di dimensione.
Il risultato è un divisorio semplice ed efficace tra le nostre due sezioni.
Aggiunta delle tre colonne
La prossima sezione conterrà tre colonne di testo e simulerà le tue caratteristiche? sezione su un sito di app web. Naturalmente, vorremmo includere anche alcuni suggerimenti visivi e il nostro font Pictos è lo strumento perfetto per farlo.
Funzionalità HTML
Il primo passo è implementare il markup di base per le nostre tre colonne. Useremo tre paragrafi e completeremo ciascuno con un h3 che manterrà le icone. Sono entrato e ho scelto alcune buone lettere da usare, sentitevi liberi di scegliere il vostro per un effetto diverso.
Ogni colonna ottiene la stessa classe in modo da poterli abbinare tutti insieme e l'ultima aggiunge una classe aggiuntiva in modo da poter eliminare facilmente i margini.
Caratteristiche: CSS di base
Per iniziare con la sezione CSS delle funzionalità, abbiamo solo bisogno di alcuni CSS super base come abbiamo usato prima. A questo punto, tutto dovrebbe avere perfettamente senso.
Si noti che, ancora una volta, ho implementato il font Pictos, ma solo su h3 tag.
Caratteristiche: Colonna CSS
Ho impostato la larghezza di questa pagina in modo abbastanza arbitrario, il che può rendere un po 'complicato l'implementazione delle colonne. I sistemi Grid usano valori come 960px perché sono facili da suddividere in diverse varianti di colonne.
Tuttavia, creare il proprio sistema di colonne al volo è abbastanza semplice. In effetti, ho trattato questo argomento in un recente articolo. Useremo la stessa tecnica qui sotto.
Fondamentalmente, iniziamo con una larghezza del 100%. Se vogliamo un margine destro del 4% applicato a due colonne che ci riporta al 92%. Dividiamo quello per tre colonne per ottenere circa il 30.66667%, che è la nostra larghezza della colonna. Questo distribuirà automaticamente tre colonne sulla larghezza del contenitore.
Come puoi vedere nell'anteprima sottostante, le nostre colonne sono risultate davvero fantastiche. Ognuno è sormontato da una bella piccola icona, che aggiunge un notevole interesse visivo alla pagina.
La demo
Con ciò, la nostra pagina web è finita. Usando solo i CSS, siamo stati in grado di implementare bellissime icone con facilità, nessuna immagine richiesta! Come puoi immaginare, l'uso di questa tecnica su un sito molto grande potrebbe essere un enorme risparmio di tempo. La parte migliore è che, una volta caricato il carattere una sola volta, sei pronto per andare e puoi accedere facilmente a qualsiasi icona all'interno.
Demo dal vivo: clicca qui
Conclusione
Per riassumere, l'uso di un font basato su immagini come Pictos può essere un grande trucco per posizionare icone nel tuo sito con pochissimo sforzo. Basta usare @ font-face per incorporare il font e inserire / stile le icone proprio come faresti con qualsiasi altro testo.
Se sei interessato a mettere le mani sul font Pictos, vai alla pagina delle offerte. Sii veloce, la nostra offerta termina lunedì 25 luglio!