6

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

このサイトで、Firebug を使用して任意のアイコン (「方向」など) のソース イメージ ファイルを見ようとすると、コンテンツの何らかのユニコードが表示されます。

ソース画像ファイルにアクセスするにはどうすればよいですか? 画像にアクセスできないようにするために彼らが使用しているハックを理解しようとしています。

4

1 に答える 1

9

これらの「画像」はアイコンフォントです。それらは通常:before/:after疑似要素を介して追加されます。この例では、コンテンツ値は外部フォント ライブラリ文字の 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 ライブラリを使用すると、次のようなアイコンを簡単に追加できます。

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

フォントのように扱われるため、CSS プロパティを使用してサイズを大きくすることができますfont-size。（例）

.fa-stack-overflow {
    font-size:30px;
    color:orange;
}
于 2013-09-24T01:22:34.453 に答える