facebookやtwitterなどSNSのオリジナルアイコンを作成する方法

facebookやtwitterなどSNSのオリジナルアイコンを作成する方法
FaceBookやTwitterなどのSNSでは、貼り付け用のボタンを用意してくれていますが、デザインが合わずサイトの雰囲気が崩れてしまうことがあります。
今回はどんなサイトにでもマッチするようにCSSでデザインを変更できるアイコンフォントを利用してSNSアイコンを作成する手順を紹介します。
オリジナルアイコンの作成方法
アイコンフォントの作成
今回はこの9つのアイコンフォントをIconMoonを利用して作成します。
- Google+
- DropBox
- Linkedln
- feedly
- はてなブックマーク
- LINE
ダウンロードしたアイコンフォントのセットはこちらになります。
アイコンフォントを使い方
<link rel="stylesheet" href=【URL】/icomoon/style.css" type="text/css" />
HTML
<span class="icon-feedly"></span> <span class="icon-hatebu"></span> <span class="icon-line"></span> <span class="icon-pocket"></span> <span class="icon-google-plus"></span> <span class="icon-facebook"></span> <span class="icon-twitter"></span> <span class="icon-dropbox"></span> <span class="icon-linkedin2"></span>
オリジナルアイコンサンプル
SNSアイコン1
HTML
<ul class="icomoon-defualt1"> <!-- feedly --> <li><a class="feedly-color icomoon-color" href="#"><span class="icon-feedly"></span></a></li> <!-- hatena --> <li><a class="hatena-color icomoon-color" href="#"><span class="icon-hatebu"></span></a></li> <!-- line --> <li><a class="line-color icomoon-color" href="#"><span class="icon-line"></span></a></li> <!-- pocket --> <li><a class="pocket-color icomoon-color" href="#"><span class="icon-pocket"></span></a></li> <!-- google --> <li><a class="google-color icomoon-color" href="#"><span class="icon-google-plus"></span></a></li> <!-- facebook --> <li><a class="facebook-color icomoon-color" href="#"><span class="icon-facebook"></span></a></li> <!-- twitter --> <li><a class="twitter-color icomoon-color" href="#"><span class="icon-twitter"></span></a></li> <!-- dropbox --> <li><a class="dropbox-color icomoon-color" href="#"><span class="icon-dropbox"></span></a></li> <!-- linkedin --> <li><a class="linkedin-color icomoon-color" href="#"><span class="icon-linkedin2"></span></a></li> </ul>
CSS
/* iconの設定 */ .icomoon-defualt1{ font-size:32px; margin: 0px; padding: 0px; } .icomoon-defualt1 li{ list-style: none; display: inline-block; margin: 0px !important; } .icomoon-defualt1 li > a{ position:relative; display: inline-block; border-radius: 100px; width: 48px; height: 48px; margin-top: 5px; } .icomoon-defualt1 li > a > span{ position:absolute; top: 9px; left: 8px; color: #fff; } /* アイコンの色 */ .icomoon-color:hover{ opacity: 0.6; } /* pocket */ .pocket-color { background: #EE4256; } /* facebook */ .facebook-color { background: #445FAC; } /* Twitter */ .twitter-color { background: #00a8e8; } /* google */ .google-color { background: #DE5644; } /* はてな */ .hatena-color{ background: #2C6EBD; } /* line */ .line-color{ background: #5AE628; } /* dropbox */ .dropbox-color{ background: #007EE5; } /* feedly */ .feedly-color{ background: #4DBB28; } /* linkedin */ .linkedin-color{ background: #02679D; }
SNSアイコン2
HTML
<ul class="icomoon-defualt2"> <!-- feedly --> <li><a class="feedly-color icomoon-color" href="#"><span class="icon-feedly"></span><span class="str">feedly</span></a></li> <!-- hatena --> <li><a class="hatena-color icomoon-color" href="#"><span class="icon-hatebu"></span><span class="str">はてブ</span></a></li> <!-- line --> <li><a class="line-color icomoon-color" href="#"><span class="icon-line"></span><span class="str">Line</span></a></li> <!-- pocket --> <li><a class="pocket-color icomoon-color" href="#"><span class="icon-pocket"></span><span class="str">pocket</span></a></li> <!-- google --> <li><a class="google-color icomoon-color" href="#"><span class="icon-google-plus set-pos-google"></span><span class="str">google+</span></a></li> <!-- facebook --> <li><a class="facebook-color icomoon-color" href="#"><span class="icon-facebook set-pos-facebook"></span><span class="str">facebook</span></a></li> <!-- twitter --> <li><a class="twitter-color icomoon-color" href="#"><span class="icon-twitter"></span><span class="str">twitter</span></a></li> <!-- dropbox --> <li><a class="dropbox-color icomoon-color" href="#"><span class="icon-dropbox"></span><span class="str">Dropbox</span></a></li> <!-- linkedin --> <li><a class="linkedin-color icomoon-color" href="#"><span class="icon-linkedin2 set-pos-linkedin"></span><span class="str">linkedin</span></a></li> </ul>
CSS
/* iconの設定 */ .icomoon-defualt2{ font-size:18px; margin: 0px; padding: 0px; } .icomoon-defualt2 li{ list-style: none; display: inline-block; margin: 0px !important; } .icomoon-defualt2 li > a{ position:relative; display: inline-block; border-radius: 2px; width: 120px; height: 38px; margin-top: 5px; } .icomoon-defualt2 li > a > span{ position:absolute; top: 11px; left: 8px; color: #fff; } .icomoon-defualt2 li > a > span.str{ position:absolute; font-size:14px; top: 11px; left: 35px; color: #fff; } /* アイコン・テキストの調整 */ .set-pos-google{ top: 13px !important; } .set-pos-facebook{ top: 9px !important; left: 5px !omportant; } .set-pos-linkedin{ top: 9px !important; } /* アイコンの色 */ .icomoon-color:hover{ opacity: 0.6; } /* pocket */ .pocket-color { background: #EE4256; } /* facebook */ .facebook-color { background: #445FAC; } /* Twitter */ .twitter-color { background: #00a8e8; } /* google */ .google-color { background: #DE5644; } /* はてな */ .hatena-color{ background: #2C6EBD; } /* line */ .line-color{ background: #5AE628; } /* dropbox */ .dropbox-color{ background: #007EE5; } /* feedly */ .feedly-color{ background: #4DBB28; } /* linkedin */ .linkedin-color{ background: #02679D; }
SNSアイコン3
HTML
<ul class="icomoon-defualt3"> <!-- feedly --> <li><a class="feedly-fore-color" href="#"><span class="icon-feedly"></span></a></li> <!-- hatena --> <li><a class="hatena-fore-color" href="#"><span class="icon-hatebu"></span></a></li> <!-- line --> <li><a class="line-fore-color" href="#"><span class="icon-line"></span></a></li> <!-- pocket --> <li><a class="pocket-fore-color" href="#"><span class="icon-pocket"></span></a></li> <!-- google --> <li><a class="google-fore-color" href="#"><span class="icon-google-plus gl-pos"></span></a></li> <!-- facebook --> <li><a class="facebook-fore-color" href="#"><span class="icon-facebook fb-pos"></span></a></li> <!-- twitter --> <li><a class="twitter-fore-color" href="#"><span class="icon-twitter"></span></a></li> <!-- dropbox --> <li><a class="dropbox-fore-color" href="#"><span class="icon-dropbox"></span></a></li> <!-- linkedin --> <li><a class="linkedin-fore-color" href="#"><span class="icon-linkedin2"></span></a></li> </ul>
CSS
/* iconの設定 */ .icomoon-defualt3{ font-size:32px; margin: 0px; padding: 0px; } .icomoon-defualt3 li{ list-style: none; display: inline-block; margin: 0px !important; } .icomoon-defualt3 li > a{ position:relative; display: inline-block; width: 48px; height: 48px; margin-top: 5px; margin-right: -5px; margin-left: 0px; } .icomoon-defualt3 li > a > span{ position:absolute; top: 9px; left: 8px; color: #ccc; } .icomoon-defualt3 li > a > span.fb-pos{ top: 6px !important; left: 4px !important; } .icomoon-defualt3 li > a > span.gl-pos{ left: 10px !important; } /* pocket */ .pocket-fore-color span:hover { color: #EE4256; } /* facebook */ .facebook-fore-color span:hover { color: #445FAC; } /* Twitter */ .twitter-fore-color span:hover { color: #00a8e8; } /* google */ .google-fore-color span:hover { color: #DE5644; } /* はてな */ .hatena-fore-color span:hover{ color: #2C6EBD; } /* line */ .line-fore-color span:hover{ color: #5AE628; } /* dropbox */ .dropbox-fore-color span:hover{ color: #007EE5; } /* feedly */ .feedly-fore-color span:hover{ color: #4DBB28; } /* linkedin */ .linkedin-fore-color span:hover{ color: #02679D; }
Related Posts

Trackback URL
http://webnonotes.com/web/sns-icon/trackback/No Comments Yet