フォント小さいアイコン application_html/css_WEB-ITnose

ページに小さなアイコンを読み込む方法はたくさんあることはわかっています。たとえば、多くの場合、CSS スプライト背景画像の配置を使用します。これは、多くの小さなアイコンを 1 つの大きな画像に統合し、CSS を使用して配置します。背景。もう 1 つのより現代的な方法は、フォント アイコンを使用することです。これは、@font-face 原則を使用してアイコン フォント ライブラリをロードし、アイコンを呼び出します。

デモのダウンロード ソース コードを表示します

CSS スプライト メソッドを使用すると、多くのカラフルなアイコンを使用でき、互換性が高く非常に便利ですが、アイコンが拡大縮小できない、または歪んでしまうという欠点があります。さらに、アイコンは大きな画像全体を変更するだけでよく、ピクセルの位置を決定するには PS やその他のツールを使用する必要があります。アイコンフォントライブラリの使用は開発者の間でますます人気が高まっており、メンテナンスが簡単で、いつでも高解像度のアイコンを表示でき、影効果やアニメーション効果を追加することもできます。唯一の欠点は、アイコンの色が比較的単一であることです。つまり、設定中に 1 つのアイコンのみを単一の色に設定できます。フォントの小さいアイコンの使い方を見てみましょう。

HTML

市場には多くのフォント アイコン ライブラリがあり、有料のものと無料で使用できるものがあります。一般的なものには icomoon、Font-Awesome、Glyphicon Halflings が含まれます。Glyphicon はブートストラップで使用すると無料です。もちろん、アリババ国内部門も独自のアイコンライブラリをオープンしている。

この記事では、icomoon フォント ライブラリの使用方法を説明します。公式 Web サイトで好きなフォント アイコンを選択し、それをダウンロードしてプロジェクトにデプロイすることもできます。もちろん、自分でアイコンを作成して、それをプロジェクトにアップロードすることもできます。公式ウェブサイト。ダウンロードしたフォント ライブラリは fonts/ フォルダーにあります。まず HTML 構造をレイアウトします:

<ul class="icons">	<li class="sp"><i class="icon-spades spades"></i> 黑桃K</li>	<li class="red"><i class="icon-file-picture"></i> 照片</li>	<li><i class="icon-tablet"></i> iPad</li>	<li><a href="#"><i class="icon-bubbles"></i> 评论</a></li></ul>

上記の HTML コードでは、要素 li に を追加し、次に class 値が CSS ファイルのフォント アイコン スタイルに対応します。

CSS

まず @font-face を使用してフォント名とロードされたフォント ファイルに名前を付けます。さまざまなブラウザやシステムと互換性を持たせるには、複数のフォント ファイルをロードする必要があります。次に、アイコン スタイルを含むクラスを定義します。アンチエイリアスが使用されることに注意してください。つまり、画像が拡大されたときにエッジがギザギザにならないようにします。次に、擬似クラスを使用してコンテンツをアイコン コンテンツに設定します。

そうですか

それでは、HTML ページを実行してみましょう。いくつかのアイコンが表示されます。これは便利で実用的です。

アイコンのアニメーション効果を定義したい場合は、CSS を使用して実現できます。

@font-face {    font-family: 'icomoon';    src:    url('../fonts/icomoon.eot?42vx6u'); /* IE9 兼容模式 */    src:    url('../fonts/icomoon.eot?42vx6u#iefix') format('embedded-opentype'),        url('../fonts/icomoon.ttf?42vx6u') format('truetype'),        url('../fonts/icomoon.woff?42vx6u') format('woff'),        url('../fonts/icomoon.svg?42vx6u#icomoon') format('svg');    font-weight: normal;    font-style: normal;}[class^="icon-"], [class*=" icon-"] {    font-family: 'icomoon' !important;    speak: none;    font-style: normal;    font-weight: normal;    font-variant: normal;    text-transform: none;    line-height: 1;    /* 抗锯齿处理 =========== */    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;}.icon-spades:before {    content: "\e900";}.icon-file-picture:before {    content: "\e901";}.icon-tablet:before {    content: "\e902";}.icon-bubbles:before {    content: "\e903";}

上記のコードは、アイコンの回転アニメーションを定義し、js と組み合わせてこの効果を実現できます。マウスがアイコン上をスライドすると、アイコンの回転アニメーションが表示され、マウスが離れると回転アニメーションが停止します。このエフェクトのコードについては、デモ内のソースコードを参照してください。 Font Awesome フォント アイコンの例と Glyphicons フォント アイコンの例もデモに追加しました。デモを表示したり、ソース コードをダウンロードして詳細を確認したりできます。