は、このサイトでは、ウェブサイト

Question

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

にソース画像ファイルを表示することはできません、それはのいくつかの並べ替えを表示しますコンテンツのユニコード

ソースイメージファイルはどうやって取得できますか？画像にアクセスできないようにするために使用しているハックを理解しようとしています。

Answer 1

これらの「イメージ」はアイコンフォントです。それらはであり、通常は:before/:after疑似要素によって追加されます。この例では、外部フォントライブラリ文字の表現をcontent value is an ASCIIとしています。これが動作するためには

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

、あなたは、外部のフォントライブラリを参照するために、要素のfont-familyプロパティを変更する必要があります。あなたの場合、フォントライブラリはFontAwesomeです。

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

Font-Awesome library使って、単純にこのようにアイコンを追加することができます。

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

をそれは、フォントのように扱われますので、あなたはCSSプロパティfont-sizeを使用して、それのサイズを大きくすることができます。そのまま君たちが保留にこれを入れて、なぜ私にはわからない(example)

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