※Qiitaの仕様変更によりFont Awesomeのアイコンフォントが表示されなくなったようです。
Qiita の記事の見出しに Font-Awesome を利用して見栄えを良くする #qiita
概要
Qiita の記事の見出しに Font-Awesome を利用して見栄えを良くする
Font Awesome
Font Awesome については、こちら。
Font Awesome
利点
- 見栄えが良くなる
- 基本的なアイコンの利用法を統一しておくと、見た目で構成を理解しやすくなる
- 内容に合わせたアイコンを利用すると内容を理解しやすい
- 欲しい情報がどこにあるか、高速でスクロールしている時に目印にし易い
手順
Icon 選び
Font Awesome からアイコンを選びます
ここでは、私が見出しによく利用している、 3Dキューブ（3個）を選ぶことにします。
フォント名は fa-cubes です。
fa-cubes を利用する場合は、以下のように記述します。
<i class="fa fa-cubes" style="font-size:1em;"></i> 概要
上記の HTML を Markdown 中に記述しておくと、この記事の「概要」のように表示されます。
本来は、 Font Awesome の CSS を link タグで取得する必要があるのですが、
Qiita は元々内部で Font Awesome を利用しているため、記述する必要がありません。
実際に、 Qiita の HTML ソースを確認すると下記の記述があります。
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
補足
Sublime Text を利用していて Markdown + Font Awesome の編集作業を円滑に行いたい方は
下記もあわせてご確認ください。
Sublime Text Snippet
Sublime Text を利用していて、楽に Font-Awesome を利用した Markdown を記述したい方は
こちらの記事を参照してください。
Sublime Text | Font Awesome のタグを snippet 化して楽に入力する
Sublime Text Markdown Preview
Sublime Text を利用していて、楽に Font-Awesome を編集しながら Markdown のプレビュー表示をしたい方は
こちらの記事を参照してください。
Sublime Text | Markdown Preview Plugin で fontawesome を利用できるようにする