SNSシェアボタンと違いメニューなので「FontAwesome」からメニューのアイコン（unicode）を選んで、CSSは「sns-share」をメニュー用に修正してstyle.cssに記述した。
*各丸ボタンに変更（radius: 50%←15%、width: 40px、hight: 50px）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
1] 丸型ボタンにするCSS .sns_circle{ position:relative; width: 50px; ←40px height: 50px; margin:0 5px; -webkit-border-radius: 50%; ←15% -moz-border-radius: 50%; ←15% border-radius: 50%; ←15% background-color: #999; float:left; list-style: none; } 2] リンク領域をブロック全体にするCSS .sns_circle a{ position:absolute; top:0; left:0; width:100%; height:100%; -webkit-border-radius: 50%; ←15% -moz-border-radius: 50%; ←15% border-radius: 50%; ←15% text-indent:-999px; color:#FFF: /*文字の色 */ } 3] フォント（FontAwsome）に関する指定のCSS .sns_circle span{ position:absolute; padding:10px; font-size:26px; ←24px color:#FFF; /*文字の色 */ } 4] 横幅を430pxに固定して真ん中に表示 ul.circle_group{ width:300px; margin:auto; list-style: none; padding:0; } 5] アイコンを表示させるCSS .hogehoge:after { font-family: 'FontAwesome'; content: ""; font-weight: none } *例）linuxの場合：.hogehogeが.xfce4(linux)として、content: "\f17c" 6] アイコンの色を選択するCSS .sns_circle.hogehoge{ background-color: #6CC655; } |
## フロントページの指定した場所にソースを作成
|
1 2 3 4 5 6 |
# 呼び出しの<i class="icon-hogehoge"></i>を基に。。。 <ul class="circle_group"> <li class="sns_circle hogehoge"><span class="icon-hogehoge"></span><a href="#" title="#"></a></li> ----省略---- </ul> |
メニュー用アイコンのCSSソースは「SNSシェアボタン」作成時と同じ、ただ各アイコンがバラバラなので適当に修正。アクセサリー的なものなので自分の好みで「この辺で良いかな？」で終了。参考にしたCSSは「sns-share」、とウエブサイトの「Webllica」
のUnicodeリストでコードをピックアップ。
追記：「OSBLOG_OSSHINET」では丸型アイコン