search
LoginSignup
14

More than 5 years have passed since last update.

posted at

Organization

ご注文は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.)

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

方針としては,

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

完成品はこんな感じ

buttons

(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>

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
14