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-faceのfont-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 をよろしくお願いいたします。