CSSでフォントアイコンを使用する方法をお教えします

CSSでフォントアイコンを使用する方法をお教えします

まず、フォントアイコンとは何でしょうか?表面的にはアイコンですが、実際はテキストです。テキストの設定と同じようにフォントアイコンを設定できます。一般的に、フォントアイコンを設定するには2つの方法があります。1つはCSSファイルを導入して特別なクラスを設定する方法、もう1つは疑似要素のコンテンツを通じて設定する方法です。一緒に設定方法を見てみましょう!

1: CSSファイルをインポートし、フォントアイコンを使用するための特別なクラスを設定します

実験には、iconfont 公式サイトを使用しました。まず、Baidu で iconfont を検索し、公式サイトにアクセスしてログインしました。ログイン後、新しいプロジェクトを作成し、まず自分のプロジェクトを開きました。

ここに画像の説明を挿入

新しいプロジェクトアイコンをクリックします。

ここに画像の説明を挿入

次にプロジェクト名を入力し、「新規」をクリックします。

ここに画像の説明を挿入

次に、上の検索ボックスに移動して、必要なアイコンを検索します。たとえば、「Tmall」と入力して Enter キーを押し、必要なアイコンの上にマウスを置き、ショッピング カート アイコンをクリックして在庫に追加します。

ここに画像の説明を挿入

次に、右上隅のショッピング カート アイコンを開き、[プロジェクトに追加] をクリックして、プロジェクト名を選択し、[OK] をクリックします。私のプロジェクト名は「HelloWorld」です。

ここに画像の説明を挿入ここに画像の説明を挿入
ここに画像の説明を挿入

その後、上記のアイコンを追加したプロジェクトである私のプロジェクトに入ります。ローカルで使用する場合は、「ローカルにダウンロード」をクリックします。

ここに画像の説明を挿入

ダウンロードしたら、解凍して、解凍したファイルの最も内側にあるすべてのファイル(css、eot、woff などで終わるファイル)をプロジェクトの下のフォルダーにコピーします。フォルダーの名前は自由に付けることができます。

ここに画像の説明を挿入

次に、HTML ファイルに iconfont.css ファイルを導入します。

ここに画像の説明を挿入

使用される方法は、まずアイコンを配置する要素のクラスに iconfont を追加し、次にアイコンの名前を追加することです。名前は次のとおりです。

ここに画像の説明を挿入

この名前を使用する場合は、アイコンに移動し、ポップアップ ボックスで [コードのコピー] をクリックします。

ここに画像の説明を挿入

その後、直接使用することができます:

ここに画像の説明を挿入

その中で、iconfontは必須であり、以下は上記のコードをコピーした後の名前です

ローカルにダウンロードしたくない場合は、オンライン CSS ファイルを使用することもできます。まず、iconfont の公式サイトで上記のプロジェクトのインターフェイスを見つけ、最初に「フォント クラス」をクリックし、次に「コードなし、ここをクリックして生成」をクリックすると、リンクが表示されます。

ここに画像の説明を挿入

そうすると、ファイルをダウンロードする必要も、関連ファイルをインポートする必要もありません。アイコンを使用する HTML コードに CSS ファイルを導入するだけで済みます。

ここに画像の説明を挿入

その後は、直接使用できます。クラスには引き続き iconfont を含める必要があり、次にクラスとしてアイコンの名前を含める必要があります。アイコン名は引き続き「コードをコピー」することで取得されます。

ここに画像の説明を挿入

すると、次のように記述できます。

ここに画像の説明を挿入

2. 疑似要素のコンテンツを通じて設定する

上記の手順を使用して、プロジェクトにアイコンを追加できます。上記の導入方法については既に説明されているため、ここで説明します。プロジェクトにアイコンがすでに導入されていると仮定すると、最初にプロジェクトをローカル コンピューターにダウンロードすることもできます。これは前の方法で説明されているため、ここでは説明しません。次に、eot、woff2、woff、ttf、および svg で終わるファイルをコピーし、これらのファイルをプロジェクト内のファイルに割り当てます。

ここに画像の説明を挿入

次に、次のようにこれらのファイルを CSS ファイルにインポートします。

@フォントフェイス {
	フォントファミリ: 'アイコンフォント';
	src: url('../fonts/iconfont.eot');
	src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('../fonts/iconfont.woff2') フォーマット('woff2'),
	url('../fonts/iconfont.woff') format('woff'), /* 最新のブラウザ */
	url('../fonts/iconfont.ttf') format('truetype'),/* Safari、Android、iOS */
	url('../fonts/iconfont.svg#iconfont') format('svg'); /* レガシー iOS */
}

上記のフォント ファミリは自分で定義します。これらのファイルを URL に導入する必要があります。url() 内の一重引用符は、これらの CSS ファイルを基準としたこれらのファイルの URL アドレスです。 #iefix#iconfontは不可欠です。 #iefixは固定で、 #iconfont内の名前はfont-family内の名前です。これらは対応するファイル名の後に追加する必要があります。format() の内容は変更できません。上記の内容を自分のものにコピーし、サフィックス名に応じて対応する URL アドレスのみを変更できます。無作為に変更しないでください。そうしないと間違いが起こります。アイコンは何度も使用するため、次に示すように、いくつかの属性をパブリック クラスに配置する必要があります。

[class^="icon-"],
[クラス*="アイコン-"] {
	フォントファミリ: 'アイコンフォント';
	フォントスタイル: 通常;
}

つまり、クラスにicon- font-family 属性と font-style 属性が存在することになります。font font-familyの名前は@font-facefont-familyの名前です。class 属性を使用する必要がある場合は、以下に示すように、htm ファイル内の要素のクラスにicon-で始まる名前を追加します。

ここに画像の説明を挿入

その後、通常は疑似要素を使用して対応するアイコンを設定できます。疑似要素は、次のように CSS で設定できます。

ここに画像の説明を挿入

内部のコンテンツについては、前面の \ は固定されており、背面の e799 はここから取得されます。アイコンフォントの公式 Web サイトに戻り、プロジェクト内のアイコンを見つけて、そこに留まり、編集アイコンをクリックします。

ここに画像の説明を挿入

「Unicode (16進数)」の下の内容をコピーします。

ここに画像の説明を挿入

それでおしまい!

ローカルにダウンロードしたくない場合は、オンラインの Unicode エンコードを使用することもできます。まず、アイコンフォントの公式サイトで上記のプロジェクトのインターフェイスを見つけ、「Unicode」をクリックし、「コードなし、ここをクリックして生成」をクリックすると、リンクが表示されます。

ここに画像の説明を挿入

リンク コンテンツをコピーします。そうすれば、ファイルをプロジェクトにコピーする必要がなくなり、上記のリンク コンテンツを CSS ファイルに配置するだけです。

@フォントフェイス {
  font-family: 'iconfont'; /* プロジェクト ID 2074612 */
  出典: url('//at.alicdn.com/t/font_2074612_ndaz958615n.eot');
  ソース: url('//at.alicdn.com/t/font_2074612_ndaz958615n.eot?#iefix') フォーマット('embedded-opentype'),
  url('//at.alicdn.com/t/font_2074612_ndaz958615n.woff2') フォーマット('woff2'),
  url('//at.alicdn.com/t/font_2074612_ndaz958615n.woff') フォーマット('woff'),
  url('//at.alicdn.com/t/font_2074612_ndaz958615n.ttf') フォーマット('truetype'),
  url('//at.alicdn.com/t/font_2074612_ndaz958615n.svg#iconfont') フォーマット('svg');
}

次に、CSS で次のように記述します。

[class^="icon-"],
[クラス*="アイコン-"] {
	フォントファミリ: 'アイコンフォント';
	フォントスタイル: 通常;
}

その後、コンテンツの内容が何であるかを書き留める必要があります。これは上記で詳しく説明されているので、ここでは繰り返しません。

.icon-tianmao::before {
	コンテンツ: '\e799';
}

次に、HTML ファイルでも必要になります。これらについては 2 番目の方法で詳しく説明しているので、ここでは詳しく説明しません。

<i class="icon-tianmao"></i>

CSS でフォ​​ント アイコンを使用する方法についての記事はこれで終わりです。CSS フォント アイコンに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  入力タイプの制限(複数の方法)

>>:  Dockerを使用してブログサイトを素早く構築する方法の詳細な説明

推薦する

Linux 環境に nginx をインストールするチュートリアル

目次1. 必要な環境をインストールする //gccをインストールする yum で gcc-c++ を...

Dreamweaver8を使用してウェブサイトのファイルをチェックして整理する方法

Dreamweaver8 を使用して独自の Web サイトを作成する目的は何ですか?インターネットに...

CSS transform-originプロパティを理解する

序文最近、花火アニメーションを作成しました。花火が散るアニメーションです。アニメーションの実装中、花...

MySQLが基礎データ構造としてB+ツリーを使用する理由

MySQL の基盤となるデータ構造が B+ ツリーであることは誰もが知っていますが、ではなぜ赤黒ツリ...

MySQL のスローログ監視の誤報問題の分析と解決

以前は、さまざまな理由により、一部のアラームは真剣に受け止められませんでした。最近、休暇中に、すぐに...

JavaScript でクールなマウス テーリング効果を実装

これを見た後、あなたにも手ができて、さまざまな美しい小さなしっぽを作れるようになることを保証します!...

JavaScript が Taobao の虫眼鏡効果を模倣

この記事では、淘宝虫眼鏡効果を実現するためのJavaScriptの具体的なコードを参考までに紹介しま...

MySQL の日付と時刻の加算と減算のサンプル コード

目次1.MySQLは時間間隔を加算または減算します2. 日付を減算する最近、MySQL を見直してい...

MySQLデータベースのリアルタイムバックアップの知識ポイントを詳しく解説

序文リアルタイムのデータベース バックアップの必要性は非常に一般的です。MySQL 自体はレプリケー...

MySQL の結合クエリとサブクエリの問題

目次複数テーブル結合の基本構文クロス結合と直積現象クロスコネクトデカルト積現象内部結合外部結合左外部...

js はマウスによる画像の切り替えを実装します (タイマーなし)

この記事の例では、マウス切り替え画像を実現するためのjsの具体的なコードを参考までに共有しています。...

Vue3 setup() の高度な使用例の詳細な説明

目次1. オプションAPIと組み合わせAPIの違い2. セットアップを具体的にどのように使用するので...

VMware 仮想マシンのインストール CentOS 8 (1905) システム チュートリアル ダイアグラム

世界的に有名な仮想マシン ソフトウェア VMware-workstation-full-15.5.0...

Windows で削除された MySQL 8.0.17 のルート アカウントとパスワードを回復する方法

少し前にSQLの独学を終え、MySQL 8.0.17をダウンロードしました。インストールして設定した...

Vueのdiffアルゴリズムについての簡単な説明

目次概要バーチャルドム原理実装プロセスパッチ方式sameVnode関数patchVnode関数upd...