CaramelTrip

家族で海外を旅するフリーランス・プログラマーのログ

はてなブログでフラットデザインアイコンを使おう | Font Awesome

f:id:parsetree:20161220164711p:plain

FontAwesome | フォントオーサム

Fontawesomeを使えば簡単にフラットデザインのアイコンを使用する事ができます。

使用方法も導入も簡単です。

はてなブログではCDNを使って導入するのが一般的だと思います。

特定のユーザー向けのサービスや会社のWEBサービスなど、外部サーバーへのアクセスをあまり好まないのであればCSSをダウンロードしてご自分のサーバーに設置する方がベターです。

今回は前者のCDNでの導入方法をご紹介します。

ちなみに、CDNのメリットは、

  • 導入が凄く簡単。

  • バージョンアップも簡単。

デメリットとしては、

  • Fontawesomeのサーバーがダウンしたら使えなくなる。

  • 使用中のバージョンをFontawesomeが提供終了したら使えなくなる。

適度な更新が必要だと思いますが、バージョンアップも簡単なので是非使ってみてください。

では、導入方法をご紹介します。

 

CDNでFontAwesomeを使おう 導入編

導入するのはすごく簡単です。

以下の一行を追加するだけです。

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

あとはどこに追加するかですが、コレは「管理画面 > 設定 > 詳細設定」から画面下にスクロールして「headに要素を追加」に追加して下さい。

なぜheadに追加するかと言いますと、ココに書かれている内容は全てのページのヘッダーに使用されるからです。

こんな感じです。

f:id:parsetree:20161220164732p:plain

 

CDNのバージョンアップ方法

ついでにバージョンアップ方法もご紹介します。簡単なので。

先程追加したリンクの記述にバージョンが記載されてます。「4.7.0」というのがソレですね。

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

コレを更新すればいいだけです。

本家のサイトにアクセスして下さい。

fontawesome.io

以下のバージョンをチェックして更新されていれば、追加した記述のバージョンを更新して下さい。

f:id:parsetree:20161220164754p:plain

以上で終了です。簡単でしょ。

 

Fontawesomeの使い方

使い方は簡単。本家サイトのアイコンページからコピペするだけです。

私は普段、RubyやPHPで仕事していますが、大体どのプロジェクトでも使ってますね。

色んなブログでも詳しく使い方が紹介されていますが、導入して慣れてきたたら本家サイトを使って更新した方が良いと思います。

結構頻繁にアップデートされていて、新しいアイコンも使えますからね。

この本家のサイトに詳しい使用方法が記載されています。

fontawesome.io

例えば、このカメラのアイコンを表示したいとします。

これを表示するには以下の1行を追加します。

<i class="fa fa-camera-retro"></i>

このクラス名を変更すれば色んなアイコンを表示する事ができます。

クラス名は本家のサイトで探せます。

fontawesome.io

本家のサイトにアクセスして欲しいアイコンをクリックして下さい。

例えば、このカレンダーアイコン。

f:id:parsetree:20161220164819p:plain

一覧からカレンダーアイコンを見つけてクリックすると、こんなページにジャンプします。

f:id:parsetree:20161220164837p:plain

あとは、これを使いたいところに貼り付ければOKです。

ね。簡単でしょ。

 

まとめ

  • Fontawesomeは簡単にフラットデザインのアイコンを使用する事ができる素敵なツール

  • CDNであればheaderに1行追加するだけで導入できる

  • CDNであればバージョンアップもheaderのバージョン番号を更新だけ

  • 使い方は簡単。本家サイトのアイコンをコピペするだけ。