Font Awesomeを使ってみた
ウサヲです。
SNSボタンを設置しようとするときの便利サイトがあったので、メモします。
設置の理由
wordpressのテーマファイルをいじくって自分なりのデザインに持っていこうとしたときに、SNSボタンのデザインに困ったりします。SNSボタンの画像をダウンロードして、それを横並びにしたり、marginを整えたり、カラー変更したいなーと思ってもそれを編集するのも億劫で・・と、できるだけシンプル！を目指すウサヲにとっては厄介なものでもありました。
シンプルにいいところを言うと、ソースコードには<head>内に１行追加する下処理をすると、あとはコピペでいい感じに仕上げてくれるという優れもの、というところです。さらに、アレンジも効く！という柔軟性にも喜び一票。楽チンしてでもアレンジにこだわりたいという矛盾した願いを叶えてくれる、素晴らしい便利ツールなのであります。
設置のアバウトな方法
ヘッダに追加する一行は、以下のような<link>タグなのですが、公式サイトの最新バージョンを確認し、バージョン番号を最新に変更する、ということは頭に入れておいたほうがいいと思います。（執筆時点で4.6.0）
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
ウサヲが試したプチアレンジ
ウサヲとしては、シンプルなこのツールを、自分のブログのカラーに容易にアレンジできるところに惹かれたのであります。ウサヲが試したのは、サークルとSNSロゴの重ね技であります。
ソースはこちら↓（<i>〜</i>はfont-awesomeのメニューiconsから取得したものそのまんまです。）
<div class="snsBtns"> <ul> <li><a href="#" target="_blank"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i><i class="fa fa-facebook fa-stack-1x" aria-hidden="true"></i></span></a></li> <li><a href="#" target="_blank"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i><i class="fa fa-twitter fa-stack-1x" aria-hidden="true"></i></span></a></li> <li><a href="#" target="_blank"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i><i class="fa fa-feed fa-stack-1x" aria-hidden="true"></i></span></a></li> </ul> </div>
CSSはこちら↓
.snsBtns ul li .fa-stack-1x { color: #fff; }
.snsBtns ul li a:link { color: #ff716f; }
.snsBtns ul li a:hover, a:focus { color: #f89c9b; }
便利ですし、かなり応用が利きますし、そして、使えます！
