ボタンの作成手順
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;
}