In CSS/JavaScript, come viene implementato questo plugin per icone/font?

Question

Demo a Jsfiddle

http://jsfiddle.net/hc046u9u/

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script> 
 

 
<i class="material-icons">add</i> 
 
<i class="material-icons">replay</i>

Quello che mi ha confuso di più è le icone non sono implementati da attributo class (come <i class="icon-add"></i> o <i class="icon-reply"></i>), ma dal testo interno del nodo <i>.

Quando visualizzo il nodo <i> nello strumento di sviluppo di chrome, sembrano quasi uguali e sembrano indistinguibili per il selettore CSS.

Se l'icona è impostata dal testo interno, come potrebbe CSS Asign icone differenti per questi <i> nodi?

Un'altra cosa che non riesco a capire è come sono implementate queste icone (carattere dell'icona, PNG o SVG). Sembra che esse siano attuate dai icon font, ma non riesco a trovare alcuna dichiarazione CSS come:

.fa-flag:before { 
    content: "\f024"; 
} 

Se le icone non è implementata dall'attributo :before di selezione e content, come vengono implementate?

Answer 1

È un "trucco" in cui le icone sono implementate come glifi composti nel carattere. Significa che le combinazioni di lettere "aggiungi" e "replay" vengono visualizzate come un carattere nel carattere, in modo simile a come "fi" e "fl" sono spesso rappresentati come un carattere in molti tipi di carattere. (Per ulteriori informazioni, vedere this Wikipedia article.) Le icone pertanto non provengono da dichiarazioni CSS.

È possibile vedere come funziona se si applica il carattere a un campo di input: se si inizia a digitare casualmente, non si vede nulla perché ai singoli personaggi non è stato assegnato un glifo, ma se si digita " aggiungi "vedrai apparire un simbolo +.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 

 
<textarea class="material-icons">add remove replay</textarea>