Non è possibile visualizzare il file di immagine di origine su un sito web

Question

http://www.wordherd.co/#features

Su questo sito, quando provo a guardare il file di immagine di origine di una delle icone (come "Indicazioni") utilizzando Firebug, visualizza una sorta di unicode per il contenuto.

Come si arriva ai file di immagine di origine? Sto cercando di capire l'hack che stanno usando per impedire che le immagini siano accessibili.

Answer 1

Queste "immagini" sono caratteri di icone. Sono di solito aggiunti tramite :before/:after pseudo elementi. In questo caso, la rappresentazione content value is an ASCII di un carattere di libreria di caratteri esterni.

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

Affinché questo funzioni, si avrebbe bisogno di modificare la proprietà dell'elemento font-family fare riferimento alla libreria di font esterno. Nel tuo caso, la libreria font è FontAwesome.

[class^="icon-"]:before, [class*=" icon-"]:before { 
    font-family: FontAwesome; 
    font-weight: normal; 
    font-style: normal; 
    display: inline-block; 
    text-decoration: inherit; 
} 

Utilizzando il Font-Awesome library, si potrebbe semplicemente aggiungere un'icona come questa:

<i class="fa fa-stack-overflow"></i> 

Dal momento che è trattato come carattere, è possibile aumentare le dimensioni di esso utilizzando la proprietà CSS font-size. (example)

.fa-stack-overflow { 
    font-size:30px; 
    color:orange; 
}