Font Awesome が随分前にアップデートされて (Version 34) 色々変わっていたので、追いかけるためにアップデートしました。
インストール
以前は、GitHubのレポジトリをCloneしてきて
その中身をsource/font/へフォントファイル、
sass/plugins/以下へscssファイルをコピーして使ってましたが、
Font AwesomeのGet Started
のページを見ると
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
を<head>内に入れるだけで使えるように変更されてたので
先にインストールしたfontディレクトリと
sass/plugins/_font-awesome.scssを消して
source/_includes/head.htmlへ上の1行を加えました。
ということで、新たにインストールするのは上の1行足すだけなので簡単です。
アイコン用クラス名変更
以前は
<i class="icon-flag"></i>
の様にicon-というプレフィックスがついてましたが、
Version 4からはfa-というプレフィックスになり、
さらにfaというクラスを余分に1つ入れる必要があります。
<i class="fa fa-flag"></i>
こんな感じ。
大きさを変えたりするものもicon-2xからfa-2xの様に変更する必要があります。
それから、いくつかのフォントについては名前が変更されてたりしました1 。
使ってる中で変更が必要だったところではこんなところ:
- :
icon-envelope-altfa-envelope - :
icon-twitter-signfa-twitter-square - :
icon-facebook-signfa-facebook-square - :
icon-google-plus-signfa-google-plus-square - :
icon-linkedin-signfa-linkedin-square - :
icon-star-emptyfa-star-o - :
icon-arrow-exchangefa-exchange - :
icon-warning-signfa-warning
また、GitHubのsquare(sign)バージョンが、
Font AwesomeのページだとOctocatの白抜きなんですが
2
、今ここで使ってみるとgitの文字の白抜きになってます。
- :
icon-github-signfa-github-square
また、rssのフォントの白抜きの方が見つからない。。。
- :
icon-rss-signfa-rss-square
この二つはNavigationの所とAbout Meの所で使ってるので、
GitHubはfa-github-alt()、
RSSはfa-rss()をしばらく使ってみます。