まず、フォントアイコンとは何でしょうか?表面的にはアイコンですが、実際はテキストです。テキストの設定と同じようにフォントアイコンを設定できます。一般的に、フォントアイコンを設定するには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 アドレスです。 [class^="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を使用してブログサイトを素早く構築する方法の詳細な説明
目次1. 必要な環境をインストールする //gccをインストールする yum で gcc-c++ を...
Dreamweaver8 を使用して独自の Web サイトを作成する目的は何ですか?インターネットに...
序文最近、花火アニメーションを作成しました。花火が散るアニメーションです。アニメーションの実装中、花...
MySQL の基盤となるデータ構造が B+ ツリーであることは誰もが知っていますが、ではなぜ赤黒ツリ...
以前は、さまざまな理由により、一部のアラームは真剣に受け止められませんでした。最近、休暇中に、すぐに...
これを見た後、あなたにも手ができて、さまざまな美しい小さなしっぽを作れるようになることを保証します!...
この記事では、淘宝虫眼鏡効果を実現するためのJavaScriptの具体的なコードを参考までに紹介しま...
目次1.MySQLは時間間隔を加算または減算します2. 日付を減算する最近、MySQL を見直してい...
序文リアルタイムのデータベース バックアップの必要性は非常に一般的です。MySQL 自体はレプリケー...
目次複数テーブル結合の基本構文クロス結合と直積現象クロスコネクトデカルト積現象内部結合外部結合左外部...
この記事の例では、マウス切り替え画像を実現するためのjsの具体的なコードを参考までに共有しています。...
目次1. オプションAPIと組み合わせAPIの違い2. セットアップを具体的にどのように使用するので...
世界的に有名な仮想マシン ソフトウェア VMware-workstation-full-15.5.0...
少し前にSQLの独学を終え、MySQL 8.0.17をダウンロードしました。インストールして設定した...
目次概要バーチャルドム原理実装プロセスパッチ方式sameVnode関数patchVnode関数upd...