HTML
<div class="nomad_share1">
<a href="http://twitter.com/intent/tweet?text=■TwitterURL■" class="icon_1"><i class="fab fa-twitter"></i></a>
<a href="https://www.facebook.com/sharer.php?u=■facebookURL■" class="icon_2"><i class="fab fa-facebook"></i></a>
<a href="https://b.hatena.ne.jp/add?mode=confirm&url=■はてなブログURL■" class="icon_3">B!</a>
<a href="https://social-plugins.line.me/lineit/share?url=■ラインURL■" class="icon_4"><i class="fas fa-comment"></i></a>
<a href="http://getpocket.com/edit?url=■PocketURL■" class="icon_5"><i class="fab fa-get-pocket"></i></a>
</div>
CSS
.nomad_share1 {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
margin: 15px 0 15px 0;
}
.nomad_share1 a {
width: 20%;
padding: 5px;
transition: .2s;
text-align: center;
color: #fff;
text-decoration: none;
font-family: sans-serif;
font-weight: bold;
}
.nomad_share1 .icon_1 {
background: #1DA1F2;
}
.nomad_share1 .icon_2 {
background: #1877F2;
}
.nomad_share1 .icon_3 {
background: #00A4DE;
}
.nomad_share1 .icon_4 {
background: #00B900;
}
.nomad_share1 .icon_5 {
background: #EF4056;
}
.nomad_share1 a:hover {
opacity: .9;
}
.nomad_share1 i {
font: normal normal normal 1em FontAwesome !important;
}