【アイコンwebフォント】Font Awesomeで記事を華やかにする！

つなワタリ＠捨て身の「プロ無謀家」（@27watari）です。現在（2018年9月末時点）、バージョン5.3配布中のアイコンwebフォント、「Font Awesome」の存在をご存じでしょうか。

 

自分のサイトでも簡単に使うことができ、見た目も楽しげで、導入すると記事が華やかになります。新しいモノ好きの人は、ぜひ使ってみてはいかがでしょうか。

Font Awesomeとは、web上で文字と同じように表示できるアイコン

通常、アイコンを導入する場合は、画像を自分のサーバーにアップし、それを記事に貼り付ける形です。

 

しかし！　Font Awesomeを使えば、その手間は不要。

 

リンクを追記するだけでサーバーにも負担をかけずに、さまざまなアイコンを自分の記事に表示することができます。

 

これです。

Font Awesome
https://fontawesome.com/

 

 

 

 

バージョン5で一気に使い勝手がアップ！　使えるアイコンの種類は1300種類以上

Font Awesomeには有料版と無料版があります。

 

有料版は約4000種類、無料版でも1300種類以上ものアイコンが揃っています。

 

太っ腹です。無料版だけでもお腹いっぱいになってしまいます。

 

 

 

使い方は簡単！　登録してコードを貼り付けるだけ

使い方はとっても簡単です。

 

（1）サイトに登録

（2）コードの貼り付け（下記参照）

 

この2ステップで準備完了です。

 

 

 

 

wordpress用のFont Awesomeプラグインはあるのか？

ちなみにwordpress用のFont Awesomeプラグインはあります。そちらの方が使いやすそうですが、トラブルが起きたりするケースも少なくないようです。できれば、コードを直接貼り込む方法がオススメです。

 

 

Font Awesomeアイコンを自分のサーバーにアップロードも可能

もし配布サーバーにトラブルが発生したら、アイコンは表示されなくなります。その点が不安です。それを避けたい人は、自分のサーバーにアップロードも可能です。しかし、それでは本来の使い方から外れていますので、割愛します。

 

 

 

Font Awesomeのアイコンを使ってみよう！

 

使い方も簡単です。

 

（1）使いたいアイコンを探す

（2）使いたいアイコンをクリック

（3）表示されたアイコン詳細ページになるコードをコピー

（4）アイコンを表示させたい場所にコードを貼り付ける

 

この4ステップで終了です。

 

 

Font Awesomeのアイコンはコードに補足を加えれば自在に変えられる

アイコンは色、サイズ、角度も自由自在に変えることができます。さらに二つのアイコンを合体させたり、動かすこともできてしまいます。

 

私的には動かすのに興味があります。

 

それぞれの方法は「サルワカ」というサルワカくんのサイトが詳しいです。そちらをご確認ください。サルワカくんはwordpressテーマ「SANGO」を開発された方なんですね。非常にわかりやすいサイトです。すごいです。

 

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

 

 

 

アイコンの動作は3パターン！　面倒なのでやらないが……

Font Awesomeはアイコンを動かすことができるので、アスキーアート的に動きのある遊び画面を作ることができたら面白いかも？　なんて思いました。

動作は「On DOM load」「On hover」「On parent hover」の3種類あります。

どのような動きをするのかは、下記ページからご覧になってください。

 

http://l-lin.github.io/font-awesome-animation/

 

いかがでしたか？　使ってみたくなりましたか？

 

私は……ヒマだったら、遊んでみます。

 

では！

 

↓[ Googleセレクト 関連コンテンツ ]↓