Webサービスを作って潰すのが趣味な人のブログ

とりあえず作ってから怒られよう

【CSS】リスト先頭の「・」とかをアイコンにしたい!そんなときはFont-awesomeを使ってCSSの:beforeとか:afterで出力しよう

f:id:vu2:20151206135333p:plain

リストって聞くとちょっとだけ健全じゃない言葉に聞こえてわくわくする系のktです。

 

Web開発者なら知らない人はいないであろう「Font Awesome」いつもお世話になっております。しゃっす。

使い方はとても簡単で「<i class="fa fa-diamond"></i>」こんな感じでHTMLタグを書くだけ。Javascriptもいらない便利なやつです。

fortawesome.github.io

 

そんな便利なFontAwesome(ふぉんとあうぇそめ?)さんですが、稀によく「リストの先頭に使いたい!」ってなりますよね?ならない?ならない人はなってください

 

 

リストの先頭アイコンとか、繰り返すもの全てにHTMLタグを書くのは面倒くさい

例えばリストの先頭をデフォルトの「・」ではなくダイアモンドに変えたいとします。リッチな気分に浸りたい人には最高の贈り物ですね。

 

f:id:vu2:20151206140319p:plain

↑イメージ

 

これをシンプルに実現しようとすればこうなります

gistca16fce6cfffa82b3690

 

見てくださいこのコードを!!クールさの欠片もない酷いコードです!!ここがアメリカならブーイングの嵐です!!

 

アイコンを変更するたびに書き換えたり追加したり……正気の沙汰じゃありません!!!

 

 

 

もっとクールに書き換えたい。みなさんもそう思いますよね?

 

CSSで指定しよう

まず使いたいアイコンを最初に貼った公式URLから探します。今回の場合はダイアモンドなのでこのページです。

http://fortawesome.github.io/Font-Awesome/icon/diamond/

f:id:vu2:20151206140745p:plain

このページをよく見ると文字コードが書いてあるのでそれをコピーしましょう。

 

f:id:vu2:20151206140846p:plain

「f219」がダイアモンドということになります。

 

これをbeforeで指定してやると……

gistf0910911acd0fc5a0daf

 

\ジャン!/

f:id:vu2:20151206140319p:plain

さっきと同じ結果になりました!!

 

beforeとかafterとかが世の中に出てきたな-とか思ってたら気付いたら当たり前に使えないとダメな技術になっていて、世の中がどんどん便利になっていく中で取り残されているおじさん感がすごいです

 

ゲームをなんでもファミコンっていうおっちゃんの気持ちがちょっとわかった夏でした(゜-゜)

 

またね~