フォント小さいアイコン 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 ファイルのフォント アイコン スタイルに対応します。

@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";}