フォントを使用して Web ページにアイコンを描画する

最初のステップはダウンロードです。 IcoMoon Webサイトからフォントアイコンを選択してダウンロードし、解凍後、プロジェクトディレクトリにfontsフォルダーを配置します。 fonts フォルダーには 4 つの形式のフォント ファイルがあります:

注: ブラウザーは各フォントのサポートに一貫性がないため、すべてのブラウザーでフォント アイコンを表示するには、これらのフォント ファイルを同時に導入する必要があります。

2 番目のステップは、@font-face ルールを使用することです。スタイルファイルでフォントをカスタマイズする

3番目のステップは、フォントアイコンを表示することです。例えば、spanタグ上にフォントアイコンを表示したい場合、まず先ほどダウンロードした解凍したフォントフォルダーを開き、その中にあるdemo.htmlをクリックしてアイコンのエンコードを取得します。

右側に示すように、 アイコン コードを spam タグに記述します。 そして、span タグのフォントをスタイル内のカスタム フォント名に設定します。

最後に、最適化され、互換性があります。 IE との互換性を保つために、@font-face ルールが改善されました。

より良い表示効果を得るには、スパン スタイルにコードを追加する必要があります。

次に、フォントアイコンの2つ目の使い方を紹介します。 フォント アイコンの名前をクラス名として使用し、このクラス名を対応するラベルに追加します。コードスニペットは次のとおりです: リーリー

注: フォントアイコンをダウンロードする際、Web サイトの上部にある設定ボタンをクリックしてパラメーターを設定できます。ダウンロード後にその中にある CSS ファイルを開くと、直接使用するためのコードが表示されます。

参考資料: MOOC - フォントを使用して Web ページにアイコンを描画します