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

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

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

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

Font Awesomeには各種Web Serviceのロゴが揃ってます．これはみなさんご存知ですよね？
（e.g. <i class="fa fa-twitter"></i> Twitter, <i class="fa fa-facebook"></i> Facebook, <i class="fa fa-github"></i> GitHub, etc.）

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

方針としては，

* 丸（<i class="fa fa-circle"></i>）のなかにロゴ配置
* 各サービスのブランドカラーにする
* なるべくガイドラインに沿ったものに

完成品はこんな感じ

![buttons](https://qiita-image-store.s3.amazonaws.com/0/14845/f403cbd0-961b-baf1-418e-daedb44f9e85.png)

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

## Twitter

[Twitterのブランドガイドライン](https://about.twitter.com/ja/press/brand-assets)によると，

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

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

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

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

```html:ﾄｩｳｨｯﾀｧｰ
<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](https://www.facebookbrand.com/)』にあります．
禁止事項は，

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

ぐらい？

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

```html:ﾌｪｨｽﾌﾞｯ
<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](https://github.com/logos)』．Twitterに比べたらだいぶゆるい．
もしかして色の指定もないのか…．

```css:github
.text-github {
  color: #191313;
}
```

```html: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](https://developers.google.com/+/branding-guidelines)』を参照．

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

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

```html:ぐぐたす
<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](https://www.tumblr.com/docs/en/trademark_guidelines)』に．

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

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

```html:たんぶらー
<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 法人向け](https://business.pinterest.com/ja/brand-guidelines)』，法人向け…？

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

```css:pinterest
.text-pinterest {
  color: #db081c;
}
```

```html:ぴんたれすと？
<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>
```