Bloggerで簡単に使えるスタイリッシュなアイコン Font Awesome

このブログのテンプレート ZikazevBlue Blogger Template で、便利そうなアイコン集 Font Awesome を使っていたので、少し調べてみた。

例えば、こんなところに。

 POST A COMMENT

1. Font Awesomeとは？

こんなフォント：

• 商用利用でもフリーのアイコン集
  • アイコンの一覧
  • ライセンス条項
• GitHubで開発しており、最新バージョンは 4.1.0 （2014年8月12日時点）
  リリース毎にアイコン数が増加。4.1.0では71個増えて、全部で439個になった
• Javascript不使用
• 色々なサイズで美しく見えるよう調整されており、CSSで簡単に修飾できる
• Bloggerでも簡単に使え、Markdown Here との共存もOK

4.1.0で追加されたアイコン（一部）

2. 使い方

すごく簡単。テンプレートに１行追加して、文中に<span>を書くのみ。

2.1. ヘッダーに<link>を追加

Bloggerのテンプレートを「HTMLの編集」で開いて

次の一行を</head>の前に追加。

<link href='//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' rel='stylesheet'/>

こんな感じ。

テンプレートの編集画面

このブログのテンプレートでは、リリース3.1.1を使っていたので、/3.1.1/を/4.1.0/へ変更した。

今後、更に新しいリリース番号へと置換すると、より多くのアイコンが利用できるだろうが、最左桁のメジャーバージョンが変わると非互換になるルールとのこと。注意が必要。

例えば、3.1と4.1では、次に説明する <span> の class 名が異なる。

2.2. 任意の場所に<span class="fa..."></span>を挿入

例えば <span class="fa fa-child fa-3x fa-fw fa-spin"></span> と書いてみると

という風になる。意味は以下のとおり。

キーワード	意味
fa	フォント指定 “Font Awesome” ファミリー
fa-child	アイコン名 Child
fa-3x	フォントサイズ 3倍
fa-fw	固定長フォント (横幅を固定)
fa-spin	回転させる（CSS3アニメーション）

他にも

• 複数のアイコンを重ねて新しいアイコンに見せる
• 前後左右を逆にする
• リストのビュレットを入れ替える

といった具合に色々なことができる。例えば、こんな感じ。

詳しい説明はこちらに

• http://fortawesome.github.io/Font-Awesome/whats-new/examples/
• HAM MEDIA MEMO | 楽して便利！Webアイコンフォント『Font Awesome』の使い方と活用 Tips

3. 注意が必要なポイント

3.1. Bloggerでの利用で

アイコンは、テンプレートで読み込まれるため、編集画面には表示されない。プレビュー画面上には表示されるので、そこで確認。

具体的には、Markdown Hereのプレーンテキスト上に<span>を書き、”Ctrl-Alt-M”でHTMLへ変換してから、プレビュー画面を見れば良い。

画像の貼り付け方にはコツが居る。こちらの記事を参照。

3.2. Markdown Hereでの注意点

Font Awesomeは class 指定に <i class="fa..."> を推奨している。

一方、Markdown Hereで<i>をHTMLに変換すると、誤動作する様子。Markdown Hereと一緒に使うなら <span class="fa..."> という書き方がよい。

今日はここまで。

​