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プラスの公式アイコンの色味は違うと思います。