Qiita の記事の見出しに Font-Awesome を利用して見栄えを良くする #qiita

  • 298
    いいね
  • 6
    コメント

※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 を利用できるようにする

参照