Font Awesome で Qiitaロゴっぽいアイコンを表現

Font Awesomeを利用すると、WEBサイトでアイコンっぽいフォントを使うことができ、非デザイナだと割と重宝します。

いま登録されているアイコンの種類 ⇒ http://fortawesome.github.io/Font-Awesome/icons/

一番かんたんに利用を始める方法は、次のようにCDNから読み込めばいいです。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

この中の「Brand Icons」カテゴリには、Facebook や Twitterなど主要なインターネットサービスのアイコンがあります。

• HTML

   <i class="fa fa-github"></i>
   <i class="fa fa-twitter"></i>
   <i class="fa fa-facebook"></i>
   <i class="fa fa-youtube"></i>
   <i class="fa fa-android"></i>
   <i class="fa fa-apple"></i>
   <i class="fa fa-google-plus"></i>
  

• 結果

  

ただ、Qiitaのアイコンはさすがに無かったので、２つのアイコンを重ねあわせて、それっぽいアイコンを表現してみました。

• HTML

   <span class="fa-stack" style="color:#4cb10d">
       <i class="fa fa-square fa-stack-2x"></i>
       <i class="fa fa-search fa-stack-1x fa-inverse fa-2x"></i>
   </span>
  

• 結果

  

  fa-square という文字色 #4cb10d のアイコンの上に、fa-search(虫眼鏡)のアイコンを文字色反転＆大きさ２倍にして、重ねあわせています。

補足

重ね合わせたアイコンのフォントは、他の重ね合わせてないフォントより大きくなってしまいます。
ですので、font タグでサイズを調整するか、もしくは他のアイコンも重ね合わせでの記法（上には何も被せない）をすると、同じような大きさになります。

• HTML

   <span class="fa-stack" style="color:#4cb10d">
       <i class="fa fa-square fa-stack-2x"></i>
       <i class="fa fa-search fa-stack-1x fa-inverse fa-2x"></i>
   </span>
   <span class="fa-stack" style="color:blue">
       <i class="fa fa-facebook-square fa-stack-2x"></i>
   </span>
   <span class="fa-stack" style="color:red">
       <i class="fa fa-google-plus-square fa-stack-2x"></i>
   </span>
  

• 結果

  

  ※実際には Facebook、Googleプラスの公式アイコンの色味は違うと思います。