LoginSignup
269

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-12-15

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

参照

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
269