ソーシャルアイコンをWebフォントで表示する方法を色々ご紹介
twitterやFacebookなどのソーシャルメディア関連のアイコンを表示しているサイトはよく見かけますが、そのほとんどは画像だと思います。
今回、Webフォントを使って表示する方法を紹介しますので参考になればと思います。
実物は別サーバーにアップしていますので、こちらでご確認ください。
今回はWeb Symbols typefaceさんのアイコンを使わせていただきました。
で、まず最初にアイコン形式のフォントを読み込む設定をします。
@font-face {
font-family: 'WebSymbolsRegular';
src: url('websymbols-regular-webfont.eot');
src: url('websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('websymbols-regular-webfont.woff') format('woff'),
url('websymbols-regular-webfont.ttf') format('truetype'),
url('websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
font-weight: normal;
font-style: normal;
}
次からは実際にアイコンを表示していく設定になります。
最初
まずは普通に並べてみます。
<div id="social-icon">f g k r v</div>
HTMLはこのようにアルファベットを並べただけになります。
#social-icon {
font-size:50px;
font-family: 'WebSymbolsRegular';
}
CSSで最初に読み込んだアイコン形式のフォントを指定すると、そのアルファベットに該当するアイコンが表示されます。
リンクにしてみる
リンクにしないと意味がないのでリンクを指定してみます。すると当然青くなって下線が入ります。
<div id="social-icon"> <a href="#">f</a> <a href="#">g</a> <a href="#">k</a> <a href="#">r</a> <a href="#">v</a> </div>
先ほどと同じようにHTMLはこのようにアルファベットを並べただけになります。コードを見ただけだとアイコンだと分かりませんし、検索エンジン様に誤解を与えるかもしれません。解決方法は次で紹介します。
アイコンごとに色を付けてみる
アイコンごとに色を付けてみます。さらに、表示したいアイコンに該当するアルファベットをHTMLではなくCSSで記述します。
<div id="social-icon"> <a href="#" class="facebook"></a> <a href="#" class="google-plus"></a> <a href="#" class="twitter"></a> <a href="#" class="feed"></a> <a href="#" class="hatena"></a> </div>
HTMLはこのように空のリンクになります。この先色々変形させていきますが、HTMLは変えずにCSSを変えていきます。
そして、それぞれのアイコンに該当するアルファベットはCSSで指定します。セレクタが長くなっていますが、別にクラス名だけでも大丈夫です。
#social-icon a {
font-size: 50px;
font-family: 'WebSymbolsRegular';
color: #fff;
text-decoration: none;
padding: 0 5px;
}
#social-icon a.facebook:before {color: #3b5998; content: "f";}
#social-icon a.google-plus:before {color: #c53727; content: "g";}
#social-icon a.twitter:before {color: #00a1e9; content: "k";}
#social-icon a.feed:before {color: #ff8c00;content: "r";}
#social-icon a.hatena:before {color: #0075c2;content: "v";}
個人的にほとんど使うことがない「:before擬似要素」を使っています。「.facebook:before {content: "f";}」だとfacebookというクラス名がついた要素の前にアルファベットの「f」が挿入されることになります。
テキストシャドウを使ってみる
テキストシャドウを使ってみます。これがあるとかなり見栄えが良くなります。
#social-icon a {
font-size: 50px;
font-family: 'WebSymbolsRegular';
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000,2px 2px 2px #aaa;
padding: 0 5px;
}
#social-icon a.facebook:before {color: #3b5998; content: "f";}
#social-icon a.google-plus:before {color: #c53727; content: "g";}
#social-icon a.twitter:before {color: #00a1e9; content: "k";}
#social-icon a.feed:before {color: #ff8c00;content: "r";}
#social-icon a.hatena:before {color: #0075c2;content: "v";}
オンマウスで色を変えてみる
最初は白くてマウスを乗せたときに色が変わるようにします。アルファベットと色を別々に指定することになるので、ちょっと長くなります。
#social-icon a {
font-size:50px;
font-family: 'WebSymbolsRegular';
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000,2px 2px 2px #aaa;
padding: 0 5px;
}
#social-icon a.facebook:before {content: "f";}
#social-icon a.google-plus:before {content: "g";}
#social-icon a.twitter:before {content: "k";}
#social-icon a.feed:before {content: "r";}
#social-icon a.hatena:before {content: "v";}
#social-icon a.facebook:hover {color: #3b5998;}
#social-icon a.google-plus:hover {color: #c53727;}
#social-icon a.twitter:hover {color: #00a1e9;}
#social-icon a.feed:hover {color: #ff8c00;}
#social-icon a.hatena:hover {color: #0075c2;}
transitionを使ってみる
先ほどとほぼ一緒ですがtransitionを使って滑らかに色が変わるようにします。
#social-icon a {
font-size: 50px;
font-family: 'WebSymbolsRegular';
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000,2px 2px 2px #aaa;
padding: 0 5px;
-moz-transition-duration: 0.3s;
-webkit-transition: 0.3s;
}
#social-icon a.facebook:before {content: "f";}
#social-icon a.google-plus:before {content: "g";}
#social-icon a.twitter:before {content: "k";}
#social-icon a.feed:before {content: "r";}
#social-icon a.hatena:before {content: "v";}
#social-icon a.facebook:hover {color: #3b5998;}
#social-icon a.google-plus:hover {color: #c53727;}
#social-icon a.twitter:hover {color: #00a1e9;}
#social-icon a.feed:hover {color: #ff8c00;}
#social-icon a.hatena:hover {color: #0075c2;}
transitionについては、ChromeやSafariのWebKit系とFirefoxがベンダープレフィックス付きで対応しています。また、WebKit系は一括指定できますが、Firefoxは一括指定できませんので、「-moz-transition-duration」で指定しています。
transitionについてはこの画像をご参考に。
RGBaカラーを使ってみる
元の色にRGBaカラーを使っています。サンプルのように背景に画像を使っているときなどに効果的です。RGBaカラーに対応していないブラウザのために、「color: #fff;」は残しています。
#social-icon a {
font-size: 50px;
font-family: 'WebSymbolsRegular';
color: #fff;
color: rgba(0,0,0,0.1);
text-decoration: none;
padding: 0 5px;
-moz-transition-duration: 0.3s;
-webkit-transition: 0.3s;
}
#social-icon a.facebook:before {content: "f";}
#social-icon a.google-plus:before {content: "g";}
#social-icon a.twitter:before {content: "k";}
#social-icon a.feed:before {content: "r";}
#social-icon a.hatena:before {content: "v";}
#social-icon a.facebook:hover {color: #3b5998;}
#social-icon a.google-plus:hover {color: #c53727;}
#social-icon a.twitter:hover {color: #00a1e9;}
#social-icon a.feed:hover {color: #ff8c00;}
#social-icon a.hatena:hover {color: #0075c2;}
オンマウスで大きくしてみる
マウスを乗せたときにアイコンが大きくなります。単純ですがtransitionを使うと滑らかに大きくなり印象はぐっと良くなります。
#social-icon a {
font-size: 42px;
font-family: 'WebSymbolsRegular';
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000, 2px 2px 2px #aaa;
padding: 0 3px;
-moz-transition-duration: 0.3s;
-webkit-transition: 0.3s;
vertical-align:text-top;
}
#social-icon a.facebook:before {color: #3b5998; content: "f";}
#social-icon a.google-plus:before {color: #c53727; content: "g";}
#social-icon a.twitter:before {color: #00a1e9; content: "k";}
#social-icon a.feed:before {color: #ff8c00;content: "r";}
#social-icon a.hatena:before {color: #0075c2;content: "v";}
#social-icon a:hover {
font-size: 60px;
}
オンマウスでくるっと回る
0.3秒かけてくるっと回ります。
#social-icon a {
font-size: 50px;
font-family: 'WebSymbolsRegular';
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000,2px 2px 2px #aaa;
padding: 0 10px;
-moz-transition-duration: 0.3s;
-webkit-transition: 0.3s;
display: block;
float: left;
}
#social-icon a.facebook:before {color: #3b5998; content: "f";}
#social-icon a.google-plus:before {color: #c53727; content: "g";}
#social-icon a.twitter:before {color: #00a1e9; content: "k";}
#social-icon a.feed:before {color: #ff8c00;content: "r";}
#social-icon a.hatena:before {color: #0075c2;content: "v";}
#social-icon a:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
もっと回してみる
先ほどと一緒ですが、今度は2秒かけて20回転します
#social-icon a {
font-size: 50px;
font-family: 'WebSymbolsRegular';
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000,2px 2px 2px #aaa;
padding: 0 10px;
-moz-transition-duration: 2s;
-webkit-transition: 2s;
display: block;
float: left;
}
#social-icon a.facebook:before {color: #3b5998; content: "f";}
#social-icon a.google-plus:before {color: #c53727; content: "g";}
#social-icon a.twitter:before {color: #00a1e9; content: "k";}
#social-icon a.feed:before {color: #ff8c00;content: "r";}
#social-icon a.hatena:before {color: #0075c2;content: "v";}
#social-icon a:hover{
-moz-transform: rotate(7200deg);
-webkit-transform: rotate(7200deg);
}
めくってみる
最後はめくれるように回ります。
#social-icon a {
font-size: 50px;
font-family: 'WebSymbolsRegular';
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000,2px 2px 2px #aaa;
padding: 0 10px;
-moz-transition-duration: 1s;
-webkit-transition: 1s;
display: block;
float: left;
}
#social-icon a.facebook:before {color: #3b5998; content: "f";}
#social-icon a.google-plus:before {color: #c53727; content: "g";}
#social-icon a.twitter:before {color: #00a1e9; content: "k";}
#social-icon a.feed:before {color: #ff8c00;content: "r";}
#social-icon a.hatena:before {color: #0075c2;content: "v";}
#social-icon a:hover{
-moz-transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
}
最後に
ということで、ソーシャルメディア関連のアイコンをWebフォントで指定する方法を色々紹介しました。
「画像でいいやん」と言われればそれまでですが、CSS3の様々なプロパティと組み合わせると画像にはない動きも可能ですので面白いかなと思います。
フィードやTwitterで最新情報をチェック
@webpark2さんのツイート
