facebookやtwitterなどSNSのオリジナルアイコンを作成する方法
facebookやtwitterなどSNSのオリジナルアイコンを作成する方法
FaceBookやTwitterなどのSNSでは、貼り付け用のボタンを用意してくれていますが、デザインが合わずサイトの雰囲気が崩れてしまうことがあります。
今回はどんなサイトにでもマッチするようにCSSでデザインを変更できるアイコンフォントを利用してSNSアイコンを作成する手順を紹介します。
オリジナルアイコンの作成方法
アイコンフォントの作成
今回はこの9つのアイコンフォントをIconMoonを利用して作成します。
- Google+
- DropBox
- Linkedln
- feedly
- はてなブックマーク
- LINE
まずは、IconMoon内にあるデフォルトのアイコンから必要なものを選択します。
取り込んだファイルを選択し、「Genarate Font」をクリックします。
最後に「Download」ボタンをクリックしてアイコンファイルをダウンロードします。
ダウンロードしたアイコンフォントのセットはこちらになります。
アイコンフォントを使い方
ダウンロードしたファイルを解凍し、中にあるstyle.cssを読み込みます。
<link rel="stylesheet" href=【URL】/icomoon/style.css" type="text/css" />
利用方法はダウンロード画面で利用したいアイコンにフォーカスを当て、「GetCode」をクリックします。
このHTMLをソースに記載するとアイコンフォントが利用できます。
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;
}
Trackback URL
http://webnonotes.com/web/sns-icon/trackback/No Comments Yet