Font Awesomeでレスポンシブ対応のSNSボタンを作る!

こんなのができます。

sns

<html>
<head>
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<style>
.sns ul {
 overflow: hidden;
 margin: 0;
 padding: 0;
}
.sns li {
 float: left;
 width: 33.333333333%;
 list-style: none;
 padding: 4px 1%;
 box-sizing: border-box;
}
.sns li > a {
 padding: 16px 0;
 display: block;
 text-align: center;
 color: #fff;
 border-radius: 8px;
 text-decoration: none;
}
.sns li > a:hover {
 cursor: pointer;
}

.sns li.twitter > a {
 background-color: #1da1f2;
 border-bottom: #0387d8 solid 8px;
}
.sns li.facebook > a {
 background-color: #3b5998;
 border-bottom: #213f7e solid 8px;
}
.sns li.googleplus > a {
 background-color: #dd4b39;
 border-bottom: #c3311f solid 8px;
}
.sns li.pocket > a {
 background-color: #ef4056;
 border-bottom: #d5263c solid 8px;
}
.sns li.hatebu > a {
 background-color: #00a4de;
 border-bottom: #008ac4 solid 8px;
 font-weight: bold;
}
.sns li.line > a {
 background-color: #00c300;
 border-bottom: #00a900 solid 8px;
 font-weight: bold;
}

</style>
</head>
<body>
<div class="sns">
 <ul>
 <li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
 <li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
 <li class="googleplus"><a href="#"><i class="fa fa-google-plus"></i></a></li>
 <li class="pocket"><a href="#"><i class="fa fa-get-pocket"></i></a></li>
 <li class="hatebu"><a href="#"><span>B!</span></a></li>
 <li class="line"><a href="#"><span>LINE</span></a></li>
 </ul>
</div>
</body>
</html>