rcmdnk's blog

Font Awesome が随分前にアップデートされて (Version 34) 色々変わっていたので、追いかけるためにアップデートしました。

Sponsored Links

インストール

以前は、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()をしばらく使ってみます。

Sponsored Links
Sponsored Links

« ターミナルでのディレクトリ移動を保存、取り出しする #screen Googleカスタム検索をカスタマイズ »