カラーミーキット（アイコン5） - カラーミーキット（2カラム）

カラーミーキット（アイコン）

16pxと24pxの2サイズ用意されています。
適用するclassによって、アイコンの色を切り替えることができます。

カラーミーキット（2カラム）では一部のアイコンCSSのみ実装しているので、使用するアイコンのCSSを以下より選んでテンプレートに追加してください。

EXAMPLE

HTML

<i class="icon-b icon-phone"></i> <!-- 16px 黒アイコンを表示 -->
<i class="icon-w icon-phone"></i> <!-- 16px 白アイコンを表示 -->
<i class="icon-lg-b icon-phone"></i> <!-- 24px 黒アイコンを表示 -->
<i class="icon-lg-w icon-phone"></i> <!-- 24px 白アイコンを表示 -->

.icon-s_facebook
.icon-youtube
.icon-google
.icon-c_google
.icon-pinterest
.icon-c_pinterest
.icon-tumblr
.icon-c_tumblr
.icon-linkedin
.icon-c_linkedin
.icon-dribbble
.icon-c_dribbble
.icon-stumbleupon
.icon-c_stumbleupon
.icon-lastfim
.icon-c_lastfim
.icon-rdio
.icon-c_rdio
.icon-spotify
.icon-c_spotify
.icon-qq
.icon-instagram
.icon-dropbox
.icon-evernote
.icon-flattr
.icon-skype
.icon-c_skype
.icon-renren
.icon-sina_weibo
.icon-paypal
.icon-picasa
.icon-soundcloud
.icon-mixi
.icon-behance
.icon-google_circles
.icon-vk
.icon-smashing

カラーミーキットではアイコンに「Entypo」を採用しています。「Entypo」のアイコンはCC BY-SA 3.0のライセンスの基で使用されています。
Pictograms designed by
Daniel Bruce ― Twitter, Dribbble & e-mail

/* 16px black */
.icon-b.icon-s_facebook {
  background-position: -160px -176px;
}
/* 16px white */
.icon-w.icon-s_facebook {
  background-position: -160px -176px;
}
/* 24px black */
.icon-lg-b.icon-s_facebook {
  background-position: -240px -264px;
}
/* 24px white */
.icon-lg-w.icon-s_facebook {
  background-position: -240px -264px;
}

/* 16px black */
.icon-b.icon-youtube {
  background-position: -128px -160px;
}
/* 16px white */
.icon-w.icon-youtube {
  background-position: -128px -160px;
}
/* 24px black */
.icon-lg-b.icon-youtube {
  background-position: -191px -240px;
}
/* 24px white */
.icon-lg-w.icon-youtube {
  background-position: -191px -240px;
}

/* 16px black */
.icon-b.icon-google {
  background-position: -176px -176px;
}
/* 16px white */
.icon-w.icon-google {
  background-position: -176px -176px;
}
/* 24px black */
.icon-lg-b.icon-google {
  background-position: -264px -264px;
}
/* 24px white */
.icon-lg-w.icon-google {
  background-position: -264px -264px;
}

/* 16px black */
.icon-b.icon-c_google {
  background-position: -192px -176px;
}
/* 16px white */
.icon-w.icon-c_google {
  background-position: -192px -176px;
}
/* 24px black */
.icon-lg-b.icon-c_google {
  background-position: -288px -264px;
}
/* 24px white */
.icon-lg-w.icon-c_google {
  background-position: -288px -264px;
}

/* 16px black */
.icon-b.icon-pinterest {
  background-position: -208px -176px;
}
/* 16px white */
.icon-w.icon-pinterest {
  background-position: -208px -176px;
}
/* 24px black */
.icon-lg-b.icon-pinterest {
  background-position: -312px -264px;
}
/* 24px white */
.icon-lg-w.icon-pinterest {
  background-position: -312px -264px;
}

/* 16px black */
.icon-b.icon-c_pinterest {
  background-position: -224px -176px;
}
/* 16px white */
.icon-w.icon-c_pinterest {
  background-position: -224px -176px;
}
/* 24px black */
.icon-lg-b.icon-c_pinterest {
  background-position: -336px -264px;
}
/* 24px white */
.icon-lg-w.icon-c_pinterest {
  background-position: -336px -264px;
}

/* 16px black */
.icon-b.icon-tumblr {
  background-position: -240px -176px;
}
/* 16px white */
.icon-w.icon-tumblr {
  background-position: -240px -176px;
}
/* 24px black */
.icon-lg-b.icon-tumblr {
  background-position: -360px -264px;
}
/* 24px white */
.icon-lg-w.icon-tumblr {
  background-position: -360px -264px;
}

/* 16px black */
.icon-b.icon-c_tumblr {
  background-position: -256px -176px;
}
/* 16px white */
.icon-w.icon-c_tumblr {
  background-position: -256px -176px;
}
/* 24px black */
.icon-lg-b.icon-c_tumblr {
  background-position: -384px -264px;
}
/* 24px white */
.icon-lg-w.icon-c_tumblr {
  background-position: -384px -264px;
}

/* 16px black */
.icon-b.icon-linkedin {
  background-position: -272px -176px;
}
/* 16px white */
.icon-w.icon-linkedin {
  background-position: -272px -176px;
}
/* 24px black */
.icon-lg-b.icon-linkedin {
  background-position: -408px -264px;
}
/* 24px white */
.icon-lg-w.icon-linkedin {
  background-position: -408px -264px;
}

/* 16px black */
.icon-b.icon-c_linkedin {
  background-position: -288px -176px;
}
/* 16px white */
.icon-w.icon-c_linkedin {
  background-position: -288px -176px;
}
/* 24px black */
.icon-lg-b.icon-c_linkedin {
  background-position: -432px -264px;
}
/* 24px white */
.icon-lg-w.icon-c_linkedin {
  background-position: -432px -264px;
}

/* 16px black */
.icon-b.icon-dribbble {
  background-position: -304px -176px;
}
/* 16px white */
.icon-w.icon-dribbble {
  background-position: -304px -176px;
}
/* 24px black */
.icon-lg-b.icon-dribbble {
  background-position: -456px -264px;
}
/* 24px white */
.icon-lg-w.icon-dribbble {
  background-position: -456px -264px;
}

/* 16px black */
.icon-b.icon-c_dribbble {
  background-position: -320px -176px;
}
/* 16px white */
.icon-w.icon-c_dribbble {
  background-position: -320px -176px;
}
/* 24px black */
.icon-lg-b.icon-c_dribbble {
  background-position: -480px -264px;
}
/* 24px white */
.icon-lg-w.icon-c_dribbble {
  background-position: -480px -264px;
}

/* 16px black */
.icon-b.icon-stumbleupon {
  background-position: -336px -176px;
}
/* 16px white */
.icon-w.icon-stumbleupon {
  background-position: -336px -176px;
}
/* 24px black */
.icon-lg-b.icon-stumbleupon {
  background-position: -504px -264px;
}
/* 24px white */
.icon-lg-w.icon-stumbleupon {
  background-position: -504px -264px;
}

/* 16px black */
.icon-b.icon-c_stumbleupon {
  background-position: -352px -176px;
}
/* 16px white */
.icon-w.icon-c_stumbleupon {
  background-position: -352px -176px;
}
/* 24px black */
.icon-lg-b.icon-c_stumbleupon {
  background-position: -528px -264px;
}
/* 24px white */
.icon-lg-w.icon-c_stumbleupon {
  background-position: -528px -264px;
}

/* 16px black */
.icon-b.icon-lastfim {
  background-position: -0px -192px;
}
/* 16px white */
.icon-w.icon-lastfim {
  background-position: -0px -192px;
}
/* 24px black */
.icon-lg-b.icon-lastfim {
  background-position: -0px -288px;
}
/* 24px white */
.icon-lg-w.icon-lastfim {
  background-position: -0px -288px;
}

/* 16px black */
.icon-b.icon-c_lastfim {
  background-position: -16px -192px;
}
/* 16px white */
.icon-w.icon-c_lastfim {
  background-position: -16px -192px;
}
/* 24px black */
.icon-lg-b.icon-c_lastfim {
  background-position: -24px -288px;
}
/* 24px white */
.icon-lg-w.icon-c_lastfim {
  background-position: -24px -288px;
}

/* 16px black */
.icon-b.icon-rdio {
  background-position: -32px -192px;
}
/* 16px white */
.icon-w.icon-rdio {
  background-position: -32px -192px;
}
/* 24px black */
.icon-lg-b.icon-rdio {
  background-position: -48px -288px;
}
/* 24px white */
.icon-lg-w.icon-rdio {
  background-position: -48px -288px;
}

/* 16px black */
.icon-b.icon-c_rdio {
  background-position: -48px -192px;
}
/* 16px white */
.icon-w.icon-c_rdio {
  background-position: -48px -192px;
}
/* 24px black */
.icon-lg-b.icon-c_rdio {
  background-position: -72px -288px;
}
/* 24px white */
.icon-lg-w.icon-c_rdio {
  background-position: -72px -288px;
}

/* 16px black */
.icon-b.icon-spotify {
  background-position: -64px -192px;
}
/* 16px white */
.icon-w.icon-spotify {
  background-position: -64px -192px;
}
/* 24px black */
.icon-lg-b.icon-spotify {
  background-position: -96px -288px;
}
/* 24px white */
.icon-lg-w.icon-spotify {
  background-position: -96px -288px;
}

/* 16px black */
.icon-b.icon-c_spotify {
  background-position: -80px -192px;
}
/* 16px white */
.icon-w.icon-c_spotify {
  background-position: -80px -192px;
}
/* 24px black */
.icon-lg-b.icon-c_spotify {
  background-position: -120px -288px;
}
/* 24px white */
.icon-lg-w.icon-c_spotify {
  background-position: -120px -288px;
}

/* 16px black */
.icon-b.icon-qq {
  background-position: -96px -192px;
}
/* 16px white */
.icon-w.icon-qq {
  background-position: -96px -192px;
}
/* 24px black */
.icon-lg-b.icon-qq {
  background-position: -144px -288px;
}
/* 24px white */
.icon-lg-w.icon-qq {
  background-position: -144px -288px;
}

/* 16px black */
.icon-b.icon-instagram {
  background-position: -112px -192px;
}
/* 16px white */
.icon-w.icon-instagram {
  background-position: -112px -192px;
}
/* 24px black */
.icon-lg-b.icon-instagram {
  background-position: -168px -288px;
}
/* 24px white */
.icon-lg-w.icon-instagram {
  background-position: -168px -288px;
}

/* 16px black */
.icon-b.icon-dropbox {
  background-position: -128px -192px;
}
/* 16px white */
.icon-w.icon-dropbox {
  background-position: -128px -192px;
}
/* 24px black */
.icon-lg-b.icon-dropbox {
  background-position: -192px -288px;
}
/* 24px white */
.icon-lg-w.icon-dropbox {
  background-position: -192px -288px;
}

/* 16px black */
.icon-b.icon-evernote {
  background-position: -144px -192px;
}
/* 16px white */
.icon-w.icon-evernote {
  background-position: -144px -192px;
}
/* 24px black */
.icon-lg-b.icon-evernote {
  background-position: -216px -288px;
}
/* 24px white */
.icon-lg-w.icon-evernote {
  background-position: -216px -288px;
}

/* 16px black */
.icon-b.icon-flattr {
  background-position: -160px -192px;
}
/* 16px white */
.icon-w.icon-flattr {
  background-position: -160px -192px;
}
/* 24px black */
.icon-lg-b.icon-flattr {
  background-position: -240px -288px;
}
/* 24px white */
.icon-lg-w.icon-flattr {
  background-position: -240px -288px;
}

/* 16px black */
.icon-b.icon-skype {
  background-position: -176px -192px;
}
/* 16px white */
.icon-w.icon-skype {
  background-position: -176px -192px;
}
/* 24px black */
.icon-lg-b.icon-skype {
  background-position: -264px -288px;
}
/* 24px white */
.icon-lg-w.icon-skype {
  background-position: -264px -288px;
}

/* 16px black */
.icon-b.icon-c_skype {
  background-position: -192px -192px;
}
/* 16px white */
.icon-w.icon-c_skype {
  background-position: -192px -192px;
}
/* 24px black */
.icon-lg-b.icon-c_skype {
  background-position: -288px -288px;
}
/* 24px white */
.icon-lg-w.icon-c_skype {
  background-position: -288px -288px;
}

/* 16px black */
.icon-b.icon-renren {
  background-position: -208px -192px;
}
/* 16px white */
.icon-w.icon-renren {
  background-position: -208px -192px;
}
/* 24px black */
.icon-lg-b.icon-renren {
  background-position: -312px -288px;
}
/* 24px white */
.icon-lg-w.icon-renren {
  background-position: -312px -288px;
}

/* 16px black */
.icon-b.icon-sina_weibo {
  background-position: -224px -192px;
}
/* 16px white */
.icon-w.icon-sina_weibo {
  background-position: -224px -192px;
}
/* 24px black */
.icon-lg-b.icon-sina_weibo {
  background-position: -336px -288px;
}
/* 24px white */
.icon-lg-w.icon-sina_weibo {
  background-position: -336px -288px;
}

/* 16px black */
.icon-b.icon-paypal {
  background-position: -240px -192px;
}
/* 16px white */
.icon-w.icon-paypal {
  background-position: -240px -192px;
}
/* 24px black */
.icon-lg-b.icon-paypal {
  background-position: -360px -288px;
}
/* 24px white */
.icon-lg-w.icon-paypal {
  background-position: -360px -288px;
}

/* 16px black */
.icon-b.icon-picasa {
  background-position: -256px -192px;
}
/* 16px white */
.icon-w.icon-picasa {
  background-position: -256px -192px;
}
/* 24px black */
.icon-lg-b.icon-picasa {
  background-position: -384px -288px;
}
/* 24px white */
.icon-lg-w.icon-picasa {
  background-position: -384px -288px;
}

/* 16px black */
.icon-b.icon-soundcloud {
  background-position: -272px -192px;
}
/* 16px white */
.icon-w.icon-soundcloud {
  background-position: -272px -192px;
}
/* 24px black */
.icon-lg-b.icon-soundcloud {
  background-position: -408px -288px;
}
/* 24px white */
.icon-lg-w.icon-soundcloud {
  background-position: -408px -288px;
}

/* 16px black */
.icon-b.icon-mixi {
  background-position: -288px -192px;
}
/* 16px white */
.icon-w.icon-mixi {
  background-position: -288px -192px;
}
/* 24px black */
.icon-lg-b.icon-mixi {
  background-position: -432px -288px;
}
/* 24px white */
.icon-lg-w.icon-mixi {
  background-position: -432px -288px;
}

/* 16px black */
.icon-b.icon-behance {
  background-position: -304px -192px;
}
/* 16px white */
.icon-w.icon-behance {
  background-position: -304px -192px;
}
/* 24px black */
.icon-lg-b.icon-behance {
  background-position: -456px -288px;
}
/* 24px white */
.icon-lg-w.icon-behance {
  background-position: -456px -288px;
}

/* 16px black */
.icon-b.icon-google_circles {
  background-position: -320px -192px;
}
/* 16px white */
.icon-w.icon-google_circles {
  background-position: -320px -192px;
}
/* 24px black */
.icon-lg-b.icon-google_circles {
  background-position: -480px -288px;
}
/* 24px white */
.icon-lg-w.icon-google_circles {
  background-position: -480px -288px;
}

/* 16px black */
.icon-b.icon-vk {
  background-position: -336px -192px;
}
/* 16px white */
.icon-w.icon-vk {
  background-position: -336px -192px;
}
/* 24px black */
.icon-lg-b.icon-vk {
  background-position: -504px -288px;
}
/* 24px white */
.icon-lg-w.icon-vk {
  background-position: -504px -288px;
}

/* 16px black */
.icon-b.icon-smashing {
  background-position: -352px -192px;
}
/* 16px white */
.icon-w.icon-smashing {
  background-position: -352px -192px;
}
/* 24px black */
.icon-lg-b.icon-smashing {
  background-position: -528px -288px;
}
/* 24px white */
.icon-lg-w.icon-smashing {
  background-position: -528px -288px;
}

カラーミーキット（アイコン）

EXAMPLE

HTML

カテゴリーから探す

コンテンツ