小さな HTML アイコンの使用 (アイコンのソース コードをダウンロードする必要はありません)

ウェブページを閲覧すると、訪問者との友好的なやり取りを形成する多くの興味深い小さなアイコンに遭遇するため、訪問者を引き付けるために開発にいくつかの鮮やかで興味深いアイコンを挿入します. アイコンを挿入するための Web サイトはたくさんあります. ここでは、小さなアイコンを使用するためにアイコンのソースコードをダウンロードする必要がないことを説明するために, アリババのアイコンライブラリ( iconfont-Alibaba ベクターアイコンライブラリ) を例として取り上げます. それらのほとんどはソースをダウンロードします.リンクから CSS スタイルを参照するのは非常に面倒です。

ステップ 1: インターネット上の Alibaba アイコン ライブラリに入り、ホームページに入り、検索バーで必要なアイコンを検索します。

 ここで検索を直接入力すると、小さな検索アイコンがたくさん表示されます。お気に入りのスタイルを選択し、クリックしてショッピング カートに追加しましょう。右上隅にショッピング カートに属するアイコンが表示され、クリックして移動します。

作成したプロジェクトにアイコンを追加します。プロジェクトを作成していない場合は、[新しいプロジェクト] ([プロジェクトの追加] の右側にあるボタン) をクリックし、[OK] をクリックします。

参加後、Unicode インターフェイスがポップアップしますので、Font クラスのページに切り替え、クリックしてオンライン接続を表示します。次に、コードを Font クラスの下にコピーします。

ステップ 2: コンパイラーに入ります (ここで使用する hbuder x コンパイラー コンパイラーは小さくて軽く、実行メモリをあまり占有しません)。次に、リンクの外部リンクをヘッダー ファイルの head タグに挿入します。コードをコピーしたばかりの href の後に貼り付けます

次に、Alibaba アイコン ライブラリのアイコン プロジェクトに移動し、好きなアイコンを見つけてそのコードをコピーします。

次に body タグに移動して i タグを挿入します. class class の後ろの属性はアイコン コード、つまり上でコピーしたアイコンのコードであり、iconfont はスペースの後のフォント アイコンです。後でアイコンを使用する場合は、アイコン形式を追加する必要があります。

このようにして, アイコンを使用することができます. アイコンに CSS 属性を追加したい場合は, スタイルで設定することができます. フォーマットは (1 ポイントとアイコンコード) です. アイコンの上にマウスを置いて白にして、黒の背景を追加します (ホバー ホバー)。

 ホバーホバールックなし                             

注意!注意!Alibaba アイコン ライブラリのアイコン プロジェクトに他のアイコンを追加する場合は、必ず [コードの更新] をクリックして、最初にコピーしたコードをこの新しいコードに置き換えてください (リンク タグ href にコピーして、以前のコードを置き換えます)。これを小さな本に覚えておくことは非常に重要です.これを交換しないと、追加したアイコンが表示されません!

 作者が作るのは簡単ではありません、たくさんサポートすることを忘れないでください、ありがとう!

おすすめ

転載: blog.csdn.net/m0_62787546/article/details/127603801