iconfont-ベクターアイコンの使用 font_html/css_WEB-ITnose

奇妙な現象を見つけました: (http://m.muzhiwan.com)

ここのアイコンは小さなアイコン画像ではありませんか? Firebug の下の要素を確認すると、次のようになっていることがわかります:

ページのソース コードは次のとおりです:

奇妙ですね、これらの乱雑な xxx は対応するアイコンですか?それで気になってBaiduで検索してみたら、これがベクターアイコンフォントであることを発見しました！

アイコンフォントを使用してアイコンを生成すると、画像ベースのアイコンと比較して次の利点があります:
1. サイズを自由に変更できる
3. 影効果を追加できる
4.透明度、回転など、画像アイコンの他の属性をサポートします
6. ブラウザーがサポートしている限り、text-ストロークや背景クリップ:テキストなどの属性を追加できます

では、iconfont を使用するにはどうすればよいでしょうか?いくつかの方法があります:

1. 既存のオープンソース iconfont ベクター アイコン フォント ライブラリを使用します。

Alibaba アイコン フォント ライブラリ

http://www.iconfont.cn/

これは、淘宝網アイコン ライブラリとアリママ アイコン ライブラリを含む、アリママ M2UX のアイコン フォント アイコン ライブラリです。

fontello

http://fontello.com/

アイコン セット全体を GitHub から直接ダウンロードすることもできます。

icomoon

http://icomoon.io/app/#/select SVG 形式のフォントをオンラインでインポートし、編集して、ダウンロードして使用できます。なんてクールなんでしょう！

Font-Awesome

http://fortawesome.github.io/Font-Awesome/ これは私のお気に入りのフォント ライブラリの 1 つで、すぐに更新されます。現在アイコンは 369 個あります。

Glyphicon Halflings

http://glyphicons.com/ このフォントアイコンはBootstrapで無料で使用できます。 200以上のアイコンが付属しています。

2. 独自の iconfont フォント ライブラリを作成するには、上記のプラットフォームのオンライン生成ツールを使用するか、iconmoon などのいくつかの iconfont 生成ツールを推奨することもできます。

3. では、このフォントアイコンを具体的にどのように使用するのでしょうか?実際、PC アプリケーションを例にとると、これは 3 つのステップで完了するだけです。

上記のデモの使用方法の詳細については、http://www を参照してください。 .iconfont.cn/help/iconuse.html

参考文献:

http://www.iconfont.cn/

http://www.chinaz.com/design/2012/0904/272556.shtml

http ://www.weste.net/2013/ 12-13/94697.html