WordPress初心者の方も、愛用者の方も、
楽しく学べるフォローサイト!

WP-Master.club ヘッダーロゴ

アイコンはWebフォントを使って楽にオシャレに!主要Webフォントをご紹介します。

はじめに

電話アイコンや、ホームを表す家の形のアイコンなど、ひと昔前まではアイコン画像を作成してWebページで使用する事が一般的でした。

しかし、この方法では手間がかかる・・・アイコンのオリジナリティは出せるが、ひとつひとつ作成するのは結構大変です。

そんなお悩みを解消するのが、今回紹介する『Webフォント』です。

 

予め用意されたアイコンをCDNなどで読み込んで、タグひとつて表示できるスグレモノです。

 

有名なアイコンWebフォント一覧

FONT AWESOME

(http://fontawesome.io/)

font-awesome

 

CONDENSE-iconFont

(http://icon.condense-c.com/)

condense-iconfont

 

Entypo

(http://www.entypo.com/)

Entypo

 

WebHostingHub Glyphs

(http://www.webhostinghub.com/glyphs/)

WebHostingHub Glyphs

 

Foundation Icon Fonts 3

(http://zurb.com/playground/foundation-icon-fonts-3)

Foundation Icon Fonts 3

 

Genericons Neue

(http://genericons.com/)

Genericons

 

Typicons

(http://www.typicons.com/)

http://www.typicons.com/

 

Ligature Symbols

(http://kudakurage.com/ligature_symbols/)

http://kudakurage.com/ligature_symbols/

 

まとめ

使い方はそれぞれですが、手軽にオシャレなアイコンを利用できるのはありがたいですね。

フォントなので、CSSでサイズや色も指定できるので便利ですね。

使い方はそれぞれですが、色々と試してみてください。