ボタンの作成手順

1. ボタンの作成

htmlでボタンを作成する
<a href="#" class="btn facebook"></a>

2. CSSの指定

facebookボタンに#3b5998、twitterボタンに#55aceeを指定する。

Font Awesomeの導入手順

1. Font Awesomeの導入

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
をHTMLに読み込む。

2. クラスの指定

<span>タグにfaクラスとfa-アイコン名　クラスを指定する
※クラス名のはFont Awesomeのサイトを参照

サンプル

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <link rel="stylesheet" href="stylesheet.css">
    <!-- ここでFont Awesomeを読みこむ -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  </head>
  <body>
    <header>
    </header>
    <div class="top-wrapper">
      <div class="container">
        <div class="btn-wrapper">
          <a href="#" class="btn facebook">
            <!-- ここに<span>タグを追加 -->
            <span class="fa fa-facebook"></span>
            Facebookで登録
          </a>
          <a href="#" class="btn twitter">
            <!-- ここに<span>タグを追加 -->
            <span class="fa fa-twitter"></span>
            Twitterで登録
          </a>
        </div>
      </div>
    </div>
  </body>
</html>

stylesheet.css

.btn {
  padding: 8px 24px;
  color: white;
  display: inline-block;
  opacity: 0.8;
  border-radius: 4px;
}

.btn:hover {
  opacity: 1;
}

.facebook {
  background-color: #3b5998;
  margin-right: 10px;
}

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

.fa {
  margin-right: 5px;
}

Facebook、Twitterボタンのサンプル