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

  • 58
    いいね
  • 1
    コメント
この記事は最終更新日から1年以上が経過しています。

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>
    
  • 結果

    スクリーンショット 2014-05-11 22.26.37.png

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

  • 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>
    
  • 結果

    スクリーンショット 2014-05-11 22.20.04.png

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

補足

重ね合わせたアイコンのフォントは、他の重ね合わせてないフォントより大きくなってしまいます。
ですので、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>
    
  • 結果

    スクリーンショット 2014-05-12 14.20.34.png

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