Webページにアイコンフォントを表示する方法は？ HTMLのアイコンフォントディスプレイスタイル

アイコンフォントを使用してアイコンを生成するには、画像ベースのアイコンと比較して次の利点があります。

1。無料の変更サイズ

2。色を自由に変更します

3.シャドウエフェクトを追加します

4.IE6はそれをサポートすることもできます

5。透明性や回転など、画像アイコンの他の特性をサポートします。

6.ブラウザがサポートしている限り、テキストストロークやバックグラウンドクリップ：テキストなどの属性を追加できます。

テキストの変更：

<h3>

<span aria-hidden = true data-icon =＆＃x21dd;> </span>

統計

</h3>

[data-icon]：{前

フォントファミリー：アイコン。 / * byoアイコンフォント、スマートにマッピング */

コンテンツ：attr（data-icon）;

話す：なし; /*信頼されていないが、ちょっと。 */

}

個々のアイコン：

<a href =＃class = icon-alone>

<span aria-hidden = true data-icon =＆＃x25a8;> </span>

<span class = screen-reader-text> rss </span>

</a>

/ *上記と同じCSS、プラス */

.icon-alone {

ディスプレイ：インラインブロック。 / * Chrome 19は、これなしでクリック可能性で奇妙でした */

}

.screen-reader-text { / *再利用可能、ツールボックスの種類のクラス * /

位置：絶対;

上：-9999px;

左：-9999px;

}

独自のIconFontを作成する必要がある場合は、Iconmoonを使用することをお勧めします。それを使用して、SVGまたはフォントをアップロードすることで必要なアイコンフォントを生成できます。この記事は、Iconmoonを使用して生成するオンラインデモンストレーションです。

結果を表示するには、オンラインデモンストレーションにアクセスしてください。アイコンフォントが気に入っていただければ幸いです。アイコンが十分に滑らかでないと思われる場合は、生成されたアイコンがより美しくなるように、処理にCufonを使用することを検討できます。

出典：http：//www.gbin1.com/technology/css/20120827-icon-font-usage/