CSSフォントアイコン

フォントのアイコン

写真は、多くの利点を持っているが、画像などの欠点は、合計ファイルサイズを大きくするだけでなく、大幅にWebページのパフォーマンスが低下します余分な「httpリクエスト」、の多くを追加するだけではなく、明らかです。さらに重要なのは、画像が歪んだ画像でズームイン、ズームアウトとして、「ズーム」良いことはできません。私たちは、後で移動応答終了を学びます、私たちは、アイコンは多くの場合、スケーリングすることができることを願っています。この時点で、非常に重要な技術が登場し、金額がない、新しい「妾」の友人である前に、そこにあります。これは、フォントのアイコン(iconfont)です。

フォントのアイコンの利点

 同じことが、透明性など、回転を、変更、絵で行うことができます。..行うことができます
 が、実際にはテキストの本質は、非常にカジュアルな色が変化することができ、影、透明性、およびように...
 自体を小さく、しかし運びます情報がカットされていません。
 ほとんどすべてのブラウザがサポートする
 モバイルエンドデバイスに必要な薬を...

プロセスを使用したフォントのアイコン

以下の手順に従って、全体的に見て、フォント、アイコン:

デザインフォントのアイコン

アイコンは、私たちの会社は、個別に設計されている場合、それは最初のステップが必要になり、この作品はUIデザイナーに属している、彼らは、次の図のようなスケッチ年、アイコンアイコンイラストレーターやベクトルグラフィックソフトウェアを作成します。

SVG形式のために保存した後、それを私たちに十分なフロントエンドのスタッフを与えます。

実際には、最初のステップは、私たちはアイコンが既に存在人気のあるオンラインであれば、あなたは第三のステップへの最初のステップをスキップすることができ、これらのアイコンをすることができ、私たちを与えて、気にしません。

世代のフォントパッケージをアップロード

ときに私たちにUIデザイナーのSVGファイルを、我々は我々が使用できるフォントファイルのページを変換する必要があり、互換性が、それはすべてのブラウザに適して生成する必要があります。

推奨サイト:http://icomoon.io

icomoonフォント

IcoMoonは2011年に設立され、ユーザーは、彼らがフォントにそれらを作るために必要なアイコンを選択することを可能にする最初のカスタムアイコンフォントジェネレータを発売しました。コンテンツの広い範囲が、非常に包括的、唯一の後悔は、外部サーバは、低速を開くということです。

推奨サイト:http://www.iconfont.cn/

アリアイコンフォントフォント

http://www.iconfont.cn/

このアイコンは、淘宝網とアリママアイコンライブラリアイコンライブラリを含むアイコンフォントフォントフォントアリママM2UX、です。AIは、使用アップロードアイコンの生成を行うことができます。単語、無料、無料!

Fontelles

http://fontello.com/

オンライン独自のアイコンフォント文字フォントのアイコンをカスタマイズし、あなたはまた、プロジェクトがオープンソースであり、GitHubのから直接アイコンのセット全体をダウンロードすることができます。

フォント恐ろしいです

http://fortawesome.github.io/Font-Awesome/

これは私の好きなフォントの一つであり、より速く更新しました。アイコンの369はすでにあります。

Glyphiconハーフリング

http://glyphicons.com/

ブートストラップのフォントアイコンを無料でご利用いただけます。これは、200個の以上のアイコンが付いています。

Icons8

https://icons8.com/

PNGは無料でダウンロード、500pxなどに強大なピクセルを提供しています

互換フォントパッケージをダウンロードしてください

ただ、アップロードが完了すると、サイトには、SVGはその後、ちょうど罰金をダウンロードし、私たちのフォントフォーマットに画像を変換しない私たちにUIを与えます

もちろん、私たちは自分自身の特別なアイコンを必要としない、アイコンはちょうどそれをダウンロードし、直接見ているようなサイトに直接、2つ以上のステップを省略することができる、いくつかを見つけるためにインターネットを使用することです。

 

HTMLへのフォント

アーカイブを取得した後、最後のステップは、最も重要なステップである、フォントファイルを持つことである、私達は私達のページに導入する必要があります。

  1. まず、フォントに次の4つのファイルが内部のフォルダ。人気の実践

最初のステップ:人々に私たち自身のフォント定義を教えて:れるフォントスタイルを宣言
 @フォントフェース{ フォントファミリ:「icomoon」; SRC:   URL('?フォント/ icomoon.eot 7kkyc2'); SRC:   URL('フォント/ icomoon.eot 7kkyc2#iefix?')フォーマット('組み込みのOpenType')、URL('フォント/ icomoon.ttf 7kkyc2?')フォーマット('TrueTypeの')、URL(「フォント/ icomoonを?.woff 7kkyc2' )フォーマット('WOFF')、URL( 'フォント/ icomoon.svg 7kkyc2#icomoon')フォーマット('SVG'); フォント重量:ノーマル; フォントスタイル:ノーマル; }
   
   
   
     
     
     
   
   
 
第二段階:フォントボックスを使用します
 スパン{ フォントファミリ:「icomoon」。}
 
 
第三ステップ:ボックス構造の内側に追加します。
 スパン:: {の前にコンテンツ:"\のE900"。} 或者   < スパン></ スパン>  
 
 
 
 

新しいアイコンは、内部の元のライブラリに追加されます

あなたは、元のフォントアイコンで作業する場合は十分ではありません、我々は新しいフォントのアイコンを追加する必要がありますが、オリジナルを削除することができない、使用され続け、その後、我々は何をする必要があります

selection.json新しいアップロード内で圧縮した後、元のファイルを置き換え、新しい、新しいダウンロード・アーカイブをしたいアイコンを選択します。

おすすめ

転載: www.cnblogs.com/superjishere/p/11687603.html