BLOG

WebアイコンフォントのFont Awesome

Webで使用する画像形式にはJPEG,PNGなどのラスタ形式(ビットマップ画像)の他にベクター形式のSVGがあります。ベクター形式の画像は拡大しても画質はとても綺麗でWebアイコンフォントとして利用されております。有名なものがFont Awesomeですね。しかしHTMLやCSSを書き込まなければ色や大きさを変更できません。

↑便利ですけどねぇ~

 

Font Awesomeを量産できるプラグイン

しかしHTML/CSSを知らなくても簡単にアイコンを作れる便利なプラグインを昨夜見つけました!それがAGP Font Awesome Collectionです。

いますぐインストールして有効化しましょう!


 
 
有効化するとAGP Iconsが管理画面左下に現われますのでShortcodesを選びます

 
 
Add Newでページを作ります。今回はsampleというページを作りました。

 
 
ページが開かれますのでビジュアル画面にしてください。
すると「FA」という項目が出来ているのでクリックします。

 
 
Font Awesome Constructor でアイコンを選びます。Simple Iconだと大きさが変えられるアイコンが作れます。


 
 
今回はテキストも入れたいのでSimple Icon with text and shape を選びます。
アイコンの形とテキストそしてアイコンの色などを選びます。


 
 
Previewで完成が確認でき、OKならInsertでsampleページが完成します。


 
 
ページが開いたら「公開」もしくは「保存」でShortcodeのページを保存します。

 
 
使い方は投稿・固定ページで「FA」ボタンをクリックでCustomからさきほど作ったShortcodeのsampleを選ぶだけでコピペできます(Insertボタンをクリック)。Shortcodeで自分の好きなアイコンを量産してストックしておき再利用しましょう。

出来上がりが下のアイコンです。他にも色々なアイコンを作成してみました。驚くほど簡単にオリジナルアイコンがたくさんストックできるので貴方のWebページが華やぎますよ。

参照ページ  

 

Web Color Page へ移動  
 


WordPressランキング