私はウェブデザインと開発を初めて利用しています。さまざまなスタイリングテクニックで遊んでいます。私の研究の過程で、私はアイコンのフォントに出くわしました。数多くのチュートリアルやビデオを調べてみましたが、何時間も手間をかけてもアイコンフォントをうまく利用することができませんでした。CSSでアイコンフォントを使用する際のトラブル
開始するには、多数のアイコンフォントを提供し、好きなアイコンを選択して生成し、最後にそれらをフォルダにダウンロードしたサイトに行きました。しかし、今ではこれらのアイコンフォントがフォルダ内にあるので、どうすればいいですか？ここで
は、ステップバイステップガイドです：
はFont Squirrelに移動し、@font-faceキットをダウンロードしてください。解凍し、名前を 'fonts'に変更し、htmlファイルと同じディレクトリに置きます。
これを使用して、HTMLファイルとして：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
@font-face {
font-family: 'ModernPictogramsNormal';
src: url('fonts/modernpics-webfont.eot');
src: url('fonts/modernpics-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/modernpics-webfont.woff') format('woff'),
url('fonts/modernpics-webfont.ttf') format('truetype'),
url('fonts/modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
font-weight: normal;
font-style: normal;
}
li {
list-style-type: none;
}
[data-icon]:before {
font-family: 'ModernPictogramsNormal';
content: attr(data-icon);
speak: none;
padding:0 5px;
}
</style>
</head>
<body>
<ul>
<li data-icon="^">RSS</li>
<li data-icon="*">Star</li>
<li data-icon=".">Shopping Cart</li>
</ul>
</body>
</html>
は、次のように表示されます
あなたがローリングしています！
また、使用する文字を知るには、フォントリスのサイトの文字マップを参照してください。
恐ろしい！だからもっと知りたいのですが、なぜ@ font-faceに非常に多くのURL（）がありますか？それらのフォントにすべてのリンクがありますか？または異なる形式ですか？ –
異なるブラウザでは、さまざまな種類のフォントファイルを使用する必要があります（iOSはiOS、.svgはiOSなど）。それらをすべて含めることが最善です。 – bookcasey
どの 'data-icon'プロパティがどのシンボルのためのものであるかを特定する方法ですが、私はいくつかの' unicode'属性と 'd'との値を持つファイルしか持っていません。私はそれを理解できませんか？ – Ammar
だけで通常のフォントのようにそれを使用します。文字は、使用したいアイコンにどの対応する外 http://www.font-face.com 図（フォントブック/文字ビューアを試してみてください） – FeifanZ
ます。http：// inspectelement.com/tutorials/go-beyond-web-safe-fonts-with-css3/その価値については、私はこれに対してお勧めしたいと思います。アイコンを持つフォントを使用すると、非常に実際のテキストが表示されます。テキストでない場合は、フォントを使用すべきではありません。スプライト、ベクトル画像などがあります。 – Brad
コメントありがとうございます。 inspire48、それは動作しますが、ユーザーがそのフォントをインストールしていなくても動作しますか？そしてブラッド、私はそれらにあなたに感謝します –