CSSフォントアイコンの使い方

css では、fonts と style.css ファイルを導入した後、インライン タグを使用してフォント アイコンを追加できます。構文形式は「」です。フォント アイコンの色とサイズは、対応する CSS を通じて変更できます。ファイルは比較的小さいため、ページの http リクエストを減らすのに役立ちます。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

オンライン生成

https://icomoon.io/app/#/この Web サイトを選択して生成します。もちろん似たようなサイトは他にもありますが、このサイトは本当に素晴らしい、素晴らしい、素晴らしいの3回です。

すべてのアイコンを SVG 形式でインポートし、すべて選択して [フォントの生成] をクリックして、対応するフォント アイコンを生成します。次に、パッケージ化されたすべてのファイルをダウンロードします。

#ページは対応するフォントアイコンを参照しています

ダウンロードしたパッケージファイルのディレクトリ構成は上記の通りです。フォントを導入するだけです。と style.css ファイルを作成するだけです。フォント ファイルは次のとおりです。eot 圧縮フォント ライブラリ、統合 svg アイコン、ttf フォント、および woff フォント フォーマットです。

style.css には、フォント ファイルの紹介と、対応するアイコンのスタイルが含まれています。

@font-face {
    font-family: 'icomoon';
    src:    url('fonts/icomoon.eot?n54c0o');
    src:    url('fonts/icomoon.eot?n54c0o#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?n54c0o') format('truetype'),
        url('fonts/icomoon.woff?n54c0o') format('woff'),
        url('fonts/icomoon.svg?n54c0o#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;
}

.icon-uniE900:before {
    content: "\e900";
}
.icon-uniE901:before {
    content: "\e901";
}
.icon-uniE902:before {
    content: "\e902";
}
.icon-uniE903:before {
    content: "\e903";
}
.icon-uniE904:before {
    content: "\e904";
}
.icon-uniE905:before {
    content: "\e905";
}

上記のスタイル シートを変更して、独自のページを表示する効果を最大限に高めることができます。

<span class="icon-uniE901"></span>

どのようなアイコンが必要ですか? 対応するクラスをインライン タグ (span、i、em) に追加するだけです。

概要

フォント アイコンを使用すると、確かに非常に便利です。対応する CSS を通じて色やサイズを変更できます。さらに、ファイルは比較的小さいため、ページの読み込みに役立ち、http リクエストが減少します。

ただし、フォント アイコン ファイルが生成されており、追加する新しいアイコンがある場合は、対応するフォント ファイルを再生成し、CSS ファイルを変更する必要があります。解決策は、生成前に使用されるすべてのアイコンをできる限り追加するか、サードパーティのフォント アイコン ライブラリを使用することです。

推奨学習:

css ビデオ チュートリアル

以上がCSSフォントアイコンの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。