Font di icone: come funzionano?

Capisco che i caratteri di icona sono solo caratteri e che è possibile ottenere le icone semplicemente chiamando il loro nome di classe, ma come funzionano i caratteri di icona?Font di icone: come funzionano?

Ho provato a verificare le risorse dei font di icone correlate caricate in Chrome per vedere come i caratteri delle icone visualizzano icone (rispetto ai caratteri generali) ma non sono stato in grado di capire come ciò avvenga.

Inoltre, non sono riuscito a trovare le risorse su come questa "tecnica di carattere dell'icona" è stata eseguita, anche se ci sono un sacco di icon fonts available. Ci sono anche un sacco di risorse che mostrano come i font di icone possono essere integrated, ma nessuno sembra condividere o scrivere su come questo è fatto!

fonte

2013-03-19 Vivek Chandra

sono images e non un tipo di carattere. Tutte le icone si trovano all'interno di un'immagine sprite (disponibile anche come singole immagini) e vengono aggiunti agli elementi come posizionate backround-image s:

Glyphicons

effettivi icone di font (FontAwesome, per esempio) do coinvolgono il download di un font specifico e fare uso della proprietà content, per esempio:

@font-face { 
    ... 
    src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), 
     url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'), 
     url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype'); 
    ... 
} 

.icon-beer:before { 
    content: "\f0fc"; 
}

Come il content proprietà isn't supported nel browser più vecchi, questi anche fare uso di images.

Ecco un esempio di FontAwesome completamente crudo in uso come un tipo di carattere, trasformando  (& # xf0f9; - si potrebbe non essere in grado di vedere questo!) In un'ambulanza: http://jsfiddle.net/GWqcF/2

fonte

2013-03-19 15:13:29

http://stackoverflow.com/questions/12379153/can -i-add-color-to-bootstrap-icons-only-using-css - la risposta dice - è fondamentalmente font –

FontAwesome icons ** sono ** font. Ho persino menzionato FontAwesome nella mia risposta e ho continuato a dire come gestiscono i browser che non supportano il loro metodo CSS di aggiungere le icone alla pagina. –

Quindi come funzionano le icone dei caratteri? come può essere reso il font come icone? - con le icone dei caratteri - gli sprite sono stati scaricati? –

Se la vostra domanda è come un classe CSS può inserire un carattere specifico (che verrà tradotto in un'icona nel carattere speciale), date un'occhiata al source for FontAwesome:

.icon-glass:before { content: "\f000"; } 
.icon-music:before { content: "\f001"; } 
.icon-search:before { content: "\f002"; } 
.icon-envelope:before { content: "\f003"; } 
.icon-heart:before { content: "\f004"; }

Quindi una direttiva contenuti CSS viene utilizzato per inserire il carattere (che è da un'area riservata speciale di Unicode riservata per l'uso privato che non rovina altri lettori).

fonte

2013-03-19 15:13:44 Thilo

Come WebFont Icone lavoro

webfonts icone lavoro utilizzando i CSS per iniettare un glifo specifica nella HTML usando la proprietà dei contenuti. Quindi utilizza @ font-face per caricare un webfont dingbat che elabora il glifo iniettato. Il risultato è che che il glifo iniettato diventa l'icona desiderata.

Per cominciare, avrete bisogno di un file webfont con le icone che avete bisogno, sia definito per particolari caratteri ASCII (A, B, C,!, @, #, Etc.) o in l'uso privato Area del carattere Unicode, che sono spazi nel font che non verranno utilizzati da caratteri specifici in un font codificato in Unicode.

Qui potete leggere come creare un'icona webfont ->link

fonte

2017-01-13 17:55:14 artamonovdev

Controllare questo, la sua totalmente usando CSS

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
    <style> 
    .battery.icon { 
     color: #000; 
     position: absolute; 
     margin-left: 2px; 
     margin-top: 6px; 
     width: 13px; 
     height: 7px; 
     border-radius: 2px; 
     border: solid 1px currentColor; 
    } 

    .battery.icon:before { 
     content: ''; 
     position: absolute; 
     right: -3px; 
     top: 1px; 
     width: 2px; 
     height: 3px; 
     border-radius: 0 2px 2px 0; 
     border-top: solid 1px currentColor; 
     border-right: solid 1px currentColor; 
     border-bottom: solid 1px currentColor; 
    } 

    .battery.icon:after { 
     content: ''; 
     position: absolute; 
     left: 1px; 
     top: 1px; 
     width: 8px; 
     height: 5px; 
     background-color: currentColor; 
    } 


    </style> 
</head> 

<body> 

<div class="battery icon"></div> 
</body> 
</html>

fonte

2017-02-07 21:46:34 Sashi

Cos'è questa risposta? – Ryan

Font di icone: come funzionano?

risposta

Problemi correlati