FontAwesomeを使って見出しを作る方法

2013-12-02 2017-10-31

今日は、Webフォントでアイコンを表示するための「Font Awesome」を使った見出し(hタグ)の作り方をご紹介。手抜きシンプルなデザインがそれなりに頑張った感じに見えるので、デザインが面倒なあまり得意でない方にもおすすめ。

※追記、かなり古い記事なので、参考にするなら「iタグを使わずに見出しを作る場合」の方を参考にしてください。こっちは今でも使えます。

準備

公式サイトからダウンロードして解凍。css、fonts、less、scssの4つのフォルダが出力されるので、cssフォルダとfontsフォルダを同じ階層に配置。あとはhtml側で設置したcssを呼び出せば準備OK。あとはhtml側でCSSを呼び出してやればOK

公式推奨の使い方で見出しを作る場合

まず、fontawesomeでアイコンを表示するための基本的な書き方をチェック。

これでアイコンが表示される。

ここに、見出しで利用するためのcssを追加する。

アイコンと見出し本体のフォントサイズが異なる点に注意。
アイコンのサイズを変えると、1ラインに2種類のフォントサイズが使われることになってしまうため、アイコンと見出し文字の縦位置がずれる。そういう時は、アイコン側の要素に

みたいな感じで指定して微調整する。(上のソースは調整済み)

で、こんな感じで見出しを作る。

一星球

iタグを使わずに見出しを作る場合

しかし、上のやり方だと空のiタグが入ってしまい、なんか気持ち悪い。SEO的にもあまり宜しくない臭いがプンプンする。

ということで、cssの疑似要素を使ってh3に直接設定する。

一星球

疑似要素:beforeのfont-familyにFontAwesomeを直接指定、contentにアイコンのコードを指定した。
アイコンのコードはFontAwesomeのCSSに

みたいな感じで書いてあるのでここから探せばOK。

また、displayにinline-blockを指定しているところに注目。これをやらないとblock要素として認識してもらえないため、widthやheight要素が効かなくなってしまう。

あとがき

オラが探してるのは一星球じゃなくて、じぃちゃんの形見の四星球なんだけど、見出しで作るのは無理みてえだな。擬似要素が足りねぇみてぇだ。
FontAwesomeには星以外も色々あるみてぇだから、皆も色々ためしてみてくれよな！

関連記事