カスタムIconfontアイコンライブラリと独自のプロジェクトに適用

一般的にプロジェクトを行うと、多かれ少なかれ、いくつかの小さなアイコンで使用されるアイコンアイコンアイコンの利点は、簡単になど、サイズ、色を調整するために、より重要な小さなサイズなど、多くのあるページのショーを作ることができるアイコンの使用は、シンプルさと美しさを高めている使用して時には使用されるアイコンのフレームワークは、我々は、それがより適切なアイコンを模索する必要があるプロジェクトのニーズを満たすことができない提供しました。そして、それはあなた自身のアイコンアイコンライブラリを生成する方法について説明します。

私たちはあなたのための右のが常にある、非常に豊富なアイコンアイコンのスタイルを持ってアリババのベクトルのアイコンライブラリを、使用することができます。
アリババベクトルのアイコンライブラリ

あなたがしたいアイコンの種類1.検索

私はいくつかの[星]アイコン、直接検索したい場合は、あなたがしたいアイコンの上にマウスをスライド:
ここに画像を挿入説明

  • ストレージを追加します

[保存]を追加]を選択し、その後、あなたがアイコンの数は、ページの右上隅に追加されている見ることができます[カート]アイコン、入力する]をクリックし
ここに画像を挿入説明
、クリックを、私は自動的に[プロジェクト]ページにジャンプした後、プロジェクトに[追加]
ここに画像を挿入説明
スイッチを左上隅アイコンのアプリケーションタイプのUnicodeFontクラスシンボル、次に[1]を選択]をクリックし、ローカル、アイコンの参照型にダウンロードすることができ、自分の長所と短所の詳細は、参照してください。アイコンのリファレンスプレゼンテーションを

  • プロジェクトで使用

FontクラスのラベルのCSSファイルを介して直接輸出のアイコン、例えば、導入

<link href="iconfont/iconfont.css" rel="stylesheet" type="text/css">

その後、クラス名iconfontの最初が固定され、ページを使用することができ、2つ目は、あなたがfontClassコードから取られたクラス名を、必要とするクラスの名前です。
ここに画像を挿入説明

<i class="iconfont icon-xingxing" style="font-size: 1.0rem"></i>

詳細はdemo_index.htmlファイルの閲覧を開くことができます。
ここに画像を挿入説明

UFI
公開された16元の記事 ウォンの賞賛2 ビュー1201

おすすめ

転載: blog.csdn.net/qq_39075021/article/details/103890442