Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

参照

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away