ご注文はFont Awesomeですか？ 第2羽「SNSを愛したFont AwesomeとSNSに愛されたFont Awesome」

CSS Advent Calendar 5日目です．投稿するのを完全に忘れてました（タイトルが思いつかなかったとかではない）．

3日目，4日目はいずれも@zakuro9715くんがAlt BootstrapなCSS Frameworksについて紹介してくれました（bootstrapよりかっこいい? Foundationを導入する，Foundationよりcool! 軽量フレームワークPureを紹介）．
こんど使ってみよ．

Font Awesomeでソーシャルボタンを作る

Font Awesomeには各種Web Serviceのロゴが揃ってます．これはみなさんご存知ですよね？
（e.g. Twitter, Facebook, GitHub, etc.）

今回はこれらを使って，いい感じなボタンでも作ってみます．

方針としては，

• 丸（）のなかにロゴ配置
• 各サービスのブランドカラーにする
• なるべくガイドラインに沿ったものに

完成品はこんな感じ

（QiitaのロゴがFontAwesomeに同梱されるのはいつになるかなー）

Twitter

Twitterのブランドガイドラインによると，

• ロゴは青（#55acee）または白
• Twitter Birdを黒やその他の色で表示してはならない
• 回転させてもダメ
• 吹き出しとかつけてもダメ

…デフォルトだとアウトですか．
（これらガイドライン外の利用は問い合わせてください，とのことです）

twitter

.text-twitter {
  color: #55acee;
}

.bg-btn-social {
  color: #e1e8ed;
}

ﾄｩｳｨｯﾀｧｰ

<span class="fa-stack fa-2x">
  <i class="fa fa-circle fa-stack-2x bg-btn-social"></i>
  <i class="fa fa-twitter fa-stack-1x text-twitter"></i>
</span>

Facebook

Facebookのブランドガイドラインは『Using Facebook Brand Assets』にあります．
禁止事項は，

• 色（白or#3b5998？）やデザインを変えるな

ぐらい？

facebook

.text-facebook {
  color: #3b5998;
}

ﾌｪｨｽﾌﾞｯ

<span class="fa-stack fa-2x">
  <i class="fa fa-circle fa-stack-2x bg-btn-social"></i>
  <i class="fa fa-facebook fa-stack-1x text-facebook"></i>
</span>

GitHub

GitHubのブランドガイドラインは『GitHub Logos and Usage』．Twitterに比べたらだいぶゆるい．
もしかして色の指定もないのか…．

github

.text-github {
  color: #191313;
}

Octocatはかわいい

<span class="fa-stack fa-2x">
  <i class="fa fa-circle fa-stack-2x bg-btn-social"></i>
  <i class="fa fa-github-alt fa-stack-1x text-github"></i>
</span>

Google+

Google+は『ブランディングに関するガイドライン - Google+ Platform — Google Developers』を参照．

色々書いてますが，色は白or赤（#dd4b39）らしいです．

google-plus

.text-google-plus {
  color: #dd4b39;
}

ぐぐたす

<span class="fa-stack fa-2x">
  <i class="fa fa-circle fa-stack-2x bg-btn-social"></i>
  <i class="fa fa-google-plus fa-stack-1x text-google-plus"></i>
</span>

Tumblr

廃人のすくつ，Tumblrは『Trademark Guidelines | Tumblr』に．

わけわからん改造はするな！とのこと（超適当）．
この青っぽいのは#2e425dでいいのかな？

tumblr

.text-tumblr {
  color: #2e425d;
}

たんぶらー

<span class="fa-stack fa-2x">
  <i class="fa fa-circle fa-stack-2x bg-btn-social"></i>
  <i class="fa fa-tumblr fa-stack-1x text-tumblr"></i>
</span>

Pinterest

Pinterest，いいデザイン眺めてニヤニヤしたいときによく利用します．ガイドラインは『ブランドガイドライン | Pinterest 法人向け』，法人向け…？

明るい背景には赤（#bd081c？）と決められている．

pinterest

.text-pinterest {
  color: #db081c;
}

ぴんたれすと？

<span class="fa-stack fa-2x">
  <i class="fa fa-circle fa-stack-2x bg-btn-social"></i>
  <i class="fa fa-pinterest fa-stack-1x text-pinterest"></i>
</span>