UIKit：ソーシャルメディアボタン

2016.06.08 Design UIKit ボタン

ソーシャルメディアボタンの設置

ソーシャルメディアボタンを表示します。
表示するソーシャルメディア等のアイコンはFont Awesomeを使用します。
Font Awesomeには沢山のアイコンが登録されているので、自分のページに合ったアイコンを選んで使用してください。
Font Awesome
またブランドカラーはSimple Iconsを参考にしました。
Simple Icons

事前準備

Font Awesomeはファイルをダウンロードしサーバー内に設置する方法とCDNを利用する方法があります。
ここではCDNを使用するので、head 要素内に下記コードを追加してください。

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">

使い方

標準表示、影付け

<div class="icons01">
    <a class="c_facebook" href="#"><i class="fa fa-facebook fa-fw"></i></a>
    <a class="c_twitter" href="#"><i class="fa fa-twitter fa-fw"></i></a>
    <a class="c_googlep" href="#"><i class="fa fa-google-plus fa-fw"></i></a>
</div>

.icons01 {
    padding:                    0 20px;
}
.icons01>a {
    font-size:                  32px;
    color:                      #000000;
    text-shadow:                2px 2px 2px #aaaaaa;
    -webkit-text-shadow:        2px 2px 2px #eeeeee;
    -moz-text-shadow:           2px 2px 2px #eeeeee;
}

ブランドカラーを指定して表示、マウスオーバーで反転表示

<div class="icons02"> <a class="c_facebook" href="#"><i class="fa fa-facebook fa-fw"></i></a> <a class="c_twitter" href="#"><i class="fa fa-twitter fa-fw"></i></a> <a class="c_googlep" href="#"><i class="fa fa-google-plus fa-fw"></i></a> </div> .icons02 { padding: 0 20px; } .icons02>a { font-size: 32px; -webkit-transition: all .2s; transition: all .2s; } .icons02>a.c_facebook { color: #3b5998; } .icons02>a.c_facebook:hover { color: #ffffff; background-color: #3b5998; } .icons02>a.c_twitter { color: #55acee; } .icons02>a.c_twitter:hover { color: #ffffff; background-color: #55acee; } .icons02>a.c_googlep { color: #dc4e41; } .icons02>a.c_googlep:hover { color: #ffffff; background-color: #dc4e41; }