Una guida per icone UI migliori e più nitide con i caratteri Web

Se hai familiarità con l'utilizzo di formati di immagine bitmap (come PNG e GIF) per visualizzare le icone su un sito web, allora avrai anche familiarità con le sue carenze. Prima di tutto, a seconda della dimensione e di quante informazioni sul colore è presente nell'icona, le dimensioni di un file di icone potrebbero essere molto grandi.

Se abbiamo troppe icone da inserire in un sito Web, questo potrebbe anche rallentare le prestazioni del sito Web dal momento che molte richieste HTTP devono essere eseguite dal browser. Anche se questo problema può essere risolto con sprite CSS, la dimensione del file è ancora grande.

L'icona bitmap ha anche carenze in termini di flessibilità e scalabilità; diciamo che abbiamo bisogno di ingrandire o ingrandire l'icona fino a un certo livello, o di vederla attraverso una risoluzione dello schermo molto alta come sul display della retina; l'icona sarà sicuramente risulta sfocato.

Bene, se prendi in considerazione alcuni di questi aspetti, probabilmente devi usare i caratteri dell'icona.

Uso di caratteri icona

Un carattere dell'icona è un set di icone contenute in un font web che può essere successivamente incorporato in un sito Web utilizzando @ Font-face. Come ha sottolineato Chris su CSS-trick, ci sono molti vantaggi nell'usare font sopra l'immagine per fornire icone;

• Il carattere è un oggetto basato su vettori che, per sua natura, è indipendente dalla risoluzione, quindi l'icona rimarrà nitida in varie risoluzioni dello schermo comprese risoluzioni dello schermo molto alte (come il livello retina).
• È anche scalabile, permettendo di ingrandirlo a molti livelli senza perdere qualità e precisione.
• Poiché l'icona è fondamentalmente un font, possiamo anche controllare il colore, la trasparenza, l'ombreggiatura del testo e persino ridimensionarlo attraverso il foglio di stile
• Possiamo anche animare l'icona con CSS3.
• L'icona è chiamata con il @ Font-face regola che è stata supportata fin da Internet Explorer 4 (con .eot).
• Richiesta HTTP minore e dimensione file inferiore.

Ecco alcuni dei migliori font di icone gratuiti che possiamo trovare:

• Font Awesome
• IcoMoon
• Icone social media
• Zurb Foundation Icons

Assicurati di aver controllato e seguito la licenza prima di incorporarla nel tuo sito web per onorare il tempo e il duro lavoro dell'autore.

@ Regola font-face

Come abbiamo detto, le icone sono incorporate usando @ Font-face regola attraverso il foglio di stile che definisce nuovo famiglia di font. Nell'esempio seguente utilizzeremo i simboli Web;

 @ font-face font-family: 'WebSymbolsRegular'; src: url ('fonts / websymbols-regular-webfont.eot'); formato src: url ('fonts / websymbols-regular-webfont.eot? #iefix') ('embedded-opentype'), formato url ('fonts / websymbols-regular-webfont.woff') ('woff'), url ('fonts / websymbols-regular-webfont.ttf') formato ('truetype'), url ('fonts / websymbols-regular-webfont.svg # WebSymbolsRegular') formato ('svg');  

Quindi, nel documento HTML, abbiamo solo bisogno di aggiungere i caratteri che rappresentano l'icona e piuttosto di applicare il nuovo famiglia di font ampiamente nel documento, possiamo fare più specificatamente aggiungendo una classe extra a determinati elementi in cui l'icona deve essere sottoposta a rendering, in questo modo;

 
 
h
 
io
 
j
 
UN
 
io
 
 

Tornando al foglio di stile, definiamo il nuovo famiglia di font per quella classe che abbiamo appena aggiunto:

 .icon-font font-family: WebSymbolsRegular; font-size: 12pt;  

• Demo @ font-face

Usando Pseudo-elementi

Se l'icona viene considerata come elemento laterale, possiamo anche consegnare l'icona pseudo-elemento. Supponendo che il nostro markup HTML sia il seguente:

 
 
rispondere
 
Rispondi a tutti
 
Inoltrare
 
attaccamento
 
Immagine
 
 

Possiamo farlo in questo modo nel foglio di stile:

 ul.icon-font.pseudo li: before font-family: WebSymbolsRegular; margin-right: 5px;  ul.icon-font.pseudo li: nth-child (1): before content: "h";  ul.icon-font.pseudo li: nth-child (2): before content: "i";  ul.icon-font.pseudo li: nth-child (3): before content: "j";  ul.icon-font.pseudo li: nth-child (4): before content: "A";  ul.icon-font.pseudo li: nth-child (5): before content: "I";  

• Pseudo-elemento dimostrativo

Uso privato Unicode

C'è una circostanza in cui le icone non sono state incorporate in lettere (A, B, C, D, ecc.), Ma sono state incorporate in Unicode Private Use per ridurre al minimo lo scontro tra i personaggi. Come in FontAwesome, l'autore ha fortunatamente aggiunto tutti i codici dei caratteri nel foglio di stile, che assomiglia a questo;

 .icona-glass: before content: "\ f0c6";  

Ma quando abbiamo bisogno di incorporare l'icona direttamente nell'HTML, qualcosa come il seguente codice \ f0c6 non renderà l'icona puntata, in quanto non è un carattere valido codificato in HTML.

HTML ha bisogno di un markup di riferimento numerico per rendere caratteri speciali. Ne abbiamo parlato un po 'nel nostro precedente tutorial sui pulsanti CSS3; questo carattere è preceduto da una combinazione di un segno di e commerciale (&), un cancelletto (#) e un X seguito dal numero esadecimale che rappresenta il personaggio.

Ad esempio, il f0c6 è un numero esadecimale, quindi il riferimento al carattere numerico in HTML sarà & # Xf0c6;, in FontAwesome quel codice mostrerà il icona di graffetta, così;

• Demo Unicode

Font Subsetting

Le icone nella raccolta potrebbero non essere tutte necessarie. In tal caso, possiamo eliminare i caratteri non utilizzati inserendo il font che lo farà anche causare dimensioni dei file di font inferiori. Fortunatamente, FontSquirrel offre un pratico strumento per fare facilmente questo lavoro, @ font-face generator.

Dopo aver visitato quella pagina e aggiunto il carattere, selezionare Esperto. Vedrete alcune più opzioni; selezionare Subsetting personalizzato.

In questo esempio, utilizziamo il carattere Sociolico per visualizzare le icone dei social media nel nostro sito Web, ma le icone di cui avremo bisogno sono solo Dribble, Facebook e Twitter che sono rispettivamente rappresentati da questi personaggi; d, f e t. Quindi, inserisci questi caratteri nel campo di inserimento Caratteri singoli come segue:

E abbiamo finito. Ora possiamo scaricare il font e nel mio caso la dimensione del font è risultata essere solo da 3Kb a 5Kb. Ricorda anche che gli unici personaggi sono quelli saranno resi in un'icona sono solo d, f e t, mentre gli altri personaggi renderanno solo una lettera normale.

Pensiero finale

Una cosa che non possiamo fare su questa pratica è aggiungere effetti altamente dettagliati come questo all'icona.

Tuttavia, se il nostro design complessivo non richiede dettagli a quel livello, questo approccio potrebbe essere un modo migliore per servire le icone nei siti web. Ha flessibilità, scalabilità, è retina pronto con una dimensione di file molto piccola, che altro possiamo chiedere?

Infine, se vuoi approfondire questo argomento, di seguito abbiamo messo insieme alcuni riferimenti utili, oltre alla nostra demo e al codice sorgente per il download.

• Come creare la propria icona Webfont - WebDesignerDepot.com
• Visualizzazione di caratteri e attributi dati - 24 modi
• Unicode di uso privato - Wikipedia

• dimostrazione
• Scarica fonte