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

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

FaceBookやTwitterなどのSNSでは、貼り付け用のボタンを用意してくれていますが、デザインが合わずサイトの雰囲気が崩れてしまうことがあります。

今回はどんなサイトにでもマッチするようにCSSでデザインを変更できるアイコンフォントを利用してSNSアイコンを作成する手順を紹介します。

オリジナルアイコンの作成方法
  1. アイコンフォントの作成
  2. アイコンフォントを使い方
  3. オリジナルアイコンサンプル

アイコンフォントの作成

今回はこの9つのアイコンフォントをIconMoonを利用して作成します。

  • Google+
  • facebook
  • twitter
  • DropBox
  • Linkedln
  • feedly
  • はてなブックマーク
  • LINE
  • pocket
まずは、IconMoon内にあるデフォルトのアイコンから必要なものを選択します。
icon
次に、他の必要なアイコンをImportします。アイコンはdouraku様が作成したものを利用させてもらいます。
icon2
douraku様のサイトからダウンロードしたsvgファイルを全て選択し、取り込みます。
icon3
取り込んだファイルを選択し、「Genarate Font」をクリックします。
icon4
最後に「Download」ボタンをクリックしてアイコンファイルをダウンロードします。
icon5

ダウンロードしたアイコンフォントのセットはこちらになります。

アイコンフォントを使い方

ダウンロードしたファイルを解凍し、中にあるstyle.cssを読み込みます。
icon9
<link rel="stylesheet" href=【URL】/icomoon/style.css" type="text/css" />
利用方法はダウンロード画面で利用したいアイコンにフォーカスを当て、「GetCode」をクリックします。
icon7
このHTMLをソースに記載するとアイコンフォントが利用できます。
icon8
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;
}
divider

Trackback URL

http://webnonotes.com/web/sns-icon/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>