nicht die Quellbilddatei auf einer Website

Question

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

Auf dieser Seite sehen kann, wenn ich versuche, an der Quelle-Image-Datei von einem der Symbole zu sehen (wie „Directions“) mit Firebug, zeigt es eine Art von Unicode für den Inhalt.

Wie gelangen Sie zu den Quellbilddateien? Ich versuche den Hack zu verstehen, den sie verwenden, um zu verhindern, dass die Bilder zugänglich sind.

Answer 1

Diese "Bilder" sind Symbolschriften. Sie sind in der Regel hinzugefügt über :before/:after Pseudo-Elemente. In diesem Fall ist die content value is an ASCII Darstellung eines externen Schriftartbibliothekszeichens.

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

Damit dies funktioniert, müssen Sie die font-family Eigenschaft des Elements ändern müssten, um die externe Schriftbibliothek verweisen. In Ihrem Fall lautet die Schriftbibliothek FontAwesome.

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

Mit der Font-Awesome library, können Sie einfach ein Symbol wie folgt hinzu:

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

Da es wie Schriftart behandelt wird, können Sie die Größe davon erhöhen font-size die CSS-Eigenschaft. (example)

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