２行の変更でサイドバーコンテンツタイトルにFont Awesomeのアイコンを表示する: I Found It!

2016/09/19

２行の変更でサイドバーコンテンツタイトルにFont Awesomeのアイコンを表示する

今日はこのサイトのPC版のサイドバーコンテンツタイトルにも使用しているアイコンフォント「Font Awesome」をこのファンブログで利用する方法など紹介したいと思います。２行変更するだけでサイドバーコンテンツタイトルにアイコンが表示できるので、カスタマイズのお手軽さの点でもおすすめです。~~この方法でアイコンを表示できるのは「記事へのリンク」にあるコンテンツ（ピンクのコンテンツ）のみです。~~

アイコンフォントについて

アイコンフォントは通常文字が割り当てられる文字コードにアイコンイメージが割り当てられているため、画像を用意しなくても絵文字感覚でアイコンを使用できます。形は「絵」ですが、扱いは「文字」なので、色も大きさも自由に変えられます。というか、何もしなくても前後の文字と同じ大きさ、色になってくれて、位置もぴったり！
今回紹介するFont Awesomeなら、634種類（バージョン4.6.3の場合）のアイコンが使えるのでとっても便利です。以前タイトルに好きなWebフォントを使うで紹介したWebフォントとしても公開されているので、フォントファイルを用意する必要もありません。iPhoneやWindows8以降で採用されてるようなフラットデザインにぴったりの素敵アイコンがいっぱいです。夢のようです。
ただ一つ残念なのが、このファンブログのスマホ版で表示させる方法がまだ見つかっていないということ。記事にアイコン用のタグを使うと、PCでは表示されるけどスマホでは何も表示されないので注意が必要です。いい方法をご存知の方、コメントいただけるとありがたいです。
というわけで、PC版のhtmlや自由形式のコンテンツの中でも、使ってみてくださいね。

Font Awesome

設置方法

「デザイン > html」からhtmlを編集します。htmlを初めて追加する場合は適当な名前で新しくhtmlを追加して、そちらを編集してください。
<head>から</head>の間にいくつか<link …/>があると思いますが、その後ろに

 <link href="//netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet">

を追加してください。それだけです。簡単すぎです。（上記はバージョン4.6.3の設置方法です。）
新しくhtmlを追加した場合はラジオボタンで編集したhtmlを選択するのをお忘れなく。
なーんだ、それならスマホ版はcssで今指定したURLを@importすればいいじゃん、と思った方もいらっしゃるかも知れませんが…ダメでした。今のところ思いつく方法を色々試してみましたが、全滅です。GoogleFontsは使えているのでなんだかFontAwesomeだけはじかれてるような…。

アイコンの表示方法

表示方法は簡単。

<i class="fa [各アイコンのクラス名]"></i>

こんな感じで空のiタグを書くだけです。空のタグを書くのが気持ち悪いからって

<i class="fa [各アイコンのクラス名]"/>

のような書き方はダメですよ。終了タグのたびにアイコンが表示されますから。各アイコンのクラス名はFont AwesomeのIconsで使いたいアイコンをクリックすると確認できます。だいたいアイコン名に「fa-」をつけた名前です。
応用編として、大きさを変えたり丸や四角の中に反転表示させたりもできます。（スマホ用に画像を貼り付けてます）

この表示に使ったコードがこちら。（改行は省略）

<i class="fa fa-wrench"></i> 通常の指定
<i class="fa fa-wrench fa-3x"></i> 大きく表示
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-wrench fa-stack-1x fa-inverse"></i>
</span> 丸と重ねて反転表示

他にも色々あるのでFont AwesomeのExamplesで確認してみてくださいね。

サイドバーコンテンツタイトルでの使用方法

~~冒頭にも書きましたが、この方法でアイコンを表示できるのは「記事へのリンク」にあるコンテンツ（ピンクのコンテンツ）のみです。~~
（ピンクのコンテンツの場合）
使用方法は「デザイン > コンテンツ」でサイドバーに配置したコンテンツの編集ボタン（×の左）をクリックして表示された編集画面のタイトル入力欄で、アイコンを表示したい場所に を記述するだけです。このページの検索コンテンツだとこんな感じで指定しています。

画像ではわかりにくいですが、アイコンの直後は半角スペースを入れるとバランスが良いと思います。
（その他のコンテンツの場合）
「コンテンツHTML編集」画面で例えばタイトルの前にアイコンを表示する場合は"> <% content.title | html %></div>の前に を記述すればＯＫです。

おすすめアイコン

いくつか筆者の利用頻度の高いアイコンを紹介しておきます。

fa-info-circleやfa-exclamation-triangleはお知らせや注意の見出しでよく見かけますよね。
fa-envelopeやfa-paper-plane-oはいずれもメール送信のリンクによく使います。筆者はfa-paper-plane-o（fa-paper-planeもあります）が好みですが、フォーマルなページではfa-envelopeが好まれるようです。
fa-phone-square（fa-phoneやfa-faxもあります）やfa-homeは電話番号や住所の前につけます。位置を表すアイコンは他にもいくつかあるので、お気に入りを探してみてくださいね。fa-homeはホームに戻るリンクにも使えます。
fa-cameraは画像を表示するボタンやリンクに使っています。ちょっと凝ったデザインのカメラアイコンfa-camera-retroや画像を表すアイコンfa-file-image-oもありますよ。
fa-external-linkはリンクが別ウィンドウで開くことを明示するのに便利です。
Iconsを見ると、ソーシャルアイコンも色々そろっていますが、公式ページに注意事項として記載があるように、AdblockPlusというWeb広告を消すアドオンを使用しているブラウザでは非表示にされてしまうようです。気になる方は自作クラスを追加して回避しましょう。
Updated at 2016/10/08
スマホ版とPC版の統合により本文でもアイコンフォントを使えるようになりました。悩みがひとつ減ってすっきりです。本文でもアイコンフォントを思い切り使いたい方はスマホ版とPC版の統合を検討されてはいかがでしょうか。数回にわけてカスタマイズ記事を書いてます。
スマホ版とPC版を統合するメリット・デメリット

Updated at 2016/10/24 ピンクのコンテンツ以外のコンテンツでもタイトルにFontAwesomeのアイコンが使えることに気が付いたので修正・方法を追記しました。