16pxと24pxの2サイズ用意されています。
適用するclassによって、アイコンの色を切り替えることができます。
カラーミーキット（2カラム）では一部のアイコンCSSのみ実装しているので、使用するアイコンのCSSを以下より選んでテンプレートに追加してください。
<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 白アイコンを表示 -->
カラーミーキットではアイコンに「Entypo」を採用しています。「Entypo」のアイコンはCC BY-SA 3.0のライセンスの基で使用されています。
Pictograms designed by
Daniel Bruce ― Twitter, Dribbble & e-mail
/* 16px black */
.icon-b.icon-phone {
background-position: -0px -0px;
}
/* 16px white */
.icon-w.icon-phone {
background-position: -0px -0px;
}
/* 24px black */
.icon-lg-b.icon-phone {
background-position: -0px -0px;
}
/* 24px white */
.icon-lg-w.icon-phone {
background-position: -0px -0px;
}
/* 16px black */
.icon-b.icon-mobile {
background-position: -16px -0px;
}
/* 16px white */
.icon-w.icon-mobile {
background-position: -16px -0px;
}
/* 24px black */
.icon-lg-b.icon-mobile {
background-position: -24px -0px;
}
/* 24px white */
.icon-lg-w.icon-mobile {
background-position: -24px -0px;
}
/* 16px black */
.icon-b.icon-mouse {
background-position: -32px -0px;
}
/* 16px white */
.icon-w.icon-mouse {
background-position: -32px -0px;
}
/* 24px black */
.icon-lg-b.icon-mouse {
background-position: -48px -0px;
}
/* 24px white */
.icon-lg-w.icon-mouse {
background-position: -48px -0px;
}
/* 16px black */
.icon-b.icon-address {
background-position: -48px -0px;
}
/* 16px white */
.icon-w.icon-address {
background-position: -48px -0px;
}
/* 24px black */
.icon-lg-b.icon-address {
background-position: -72px -0px;
}
/* 24px white */
.icon-lg-w.icon-address {
background-position: -72px -0px;
}
/* 16px black */
.icon-b.icon-mail {
background-position: -64px -0px;
}
/* 16px white */
.icon-w.icon-mail {
background-position: -64px -0px;
}
/* 24px black */
.icon-lg-b.icon-mail {
background-position: -96px -0px;
}
/* 24px white */
.icon-lg-w.icon-mail {
background-position: -96px -0px;
}
/* 16px black */
.icon-b.icon-paper_plane {
background-position: -80px -0px;
}
/* 16px white */
.icon-w.icon-paper_plane {
background-position: -80px -0px;
}
/* 24px black */
.icon-lg-b.icon-paper_plane {
background-position: -120px -0px;
}
/* 24px white */
.icon-lg-w.icon-paper_plane {
background-position: -120px -0px;
}
/* 16px black */
.icon-b.icon-pencil {
background-position: -96px -0px;
}
/* 16px white */
.icon-w.icon-pencil {
background-position: -96px -0px;
}
/* 24px black */
.icon-lg-b.icon-pencil {
background-position: -144px -0px;
}
/* 24px white */
.icon-lg-w.icon-pencil {
background-position: -144px -0px;
}
/* 16px black */
.icon-b.icon-feather {
background-position: -112px -0px;
}
/* 16px white */
.icon-w.icon-feather {
background-position: -112px -0px;
}
/* 24px black */
.icon-lg-b.icon-feather {
background-position: -168px -0px;
}
/* 24px white */
.icon-lg-w.icon-feather {
background-position: -168px -0px;
}
/* 16px black */
.icon-b.icon-attach {
background-position: -128px -0px;
}
/* 16px white */
.icon-w.icon-attach {
background-position: -128px -0px;
}
/* 24px black */
.icon-lg-b.icon-attach {
background-position: -192px -0px;
}
/* 24px white */
.icon-lg-w.icon-attach {
background-position: -192px -0px;
}
/* 16px black */
.icon-b.icon-inbox {
background-position: -144px -0px;
}
/* 16px white */
.icon-w.icon-inbox {
background-position: -144px -0px;
}
/* 24px black */
.icon-lg-b.icon-inbox {
background-position: -216px -0px;
}
/* 24px white */
.icon-lg-w.icon-inbox {
background-position: -216px -0px;
}
/* 16px black */
.icon-b.icon-reply {
background-position: -160px -0px;
}
/* 16px white */
.icon-w.icon-reply {
background-position: -160px -0px;
}
/* 24px black */
.icon-lg-b.icon-reply {
background-position: -240px -0px;
}
/* 24px white */
.icon-lg-w.icon-reply {
background-position: -240px -0px;
}
/* 16px black */
.icon-b.icon-reply_all {
background-position: -176px -0px;
}
/* 16px white */
.icon-w.icon-reply_all {
background-position: -176px -0px;
}
/* 24px black */
.icon-lg-b.icon-reply_all {
background-position: -264px -0px;
}
/* 24px white */
.icon-lg-w.icon-reply_all {
background-position: -264px -0px;
}
/* 16px black */
.icon-b.icon-forward {
background-position: -192px -0px;
}
/* 16px white */
.icon-w.icon-forward {
background-position: -192px -0px;
}
/* 24px black */
.icon-lg-b.icon-forward {
background-position: -288px -0px;
}
/* 24px white */
.icon-lg-w.icon-forward {
background-position: -288px -0px;
}
/* 16px black */
.icon-b.icon-user {
background-position: -208px -0px;
}
/* 16px white */
.icon-w.icon-user {
background-position: -208px -0px;
}
/* 24px black */
.icon-lg-b.icon-user {
background-position: -312px -0px;
}
/* 24px white */
.icon-lg-w.icon-user {
background-position: -312px -0px;
}
/* 16px black */
.icon-b.icon-users {
background-position: -224px -0px;
}
/* 16px white */
.icon-w.icon-users {
background-position: -224px -0px;
}
/* 24px black */
.icon-lg-b.icon-users {
background-position: -336px -0px;
}
/* 24px white */
.icon-lg-w.icon-users {
background-position: -336px -0px;
}
/* 16px black */
.icon-b.icon-adduser {
background-position: -240px -0px;
}
/* 16px white */
.icon-w.icon-adduser {
background-position: -240px -0px;
}
/* 24px black */
.icon-lg-b.icon-adduser {
background-position: -360px -0px;
}
/* 24px white */
.icon-lg-w.icon-adduser {
background-position: -360px -0px;
}
/* 16px black */
.icon-b.icon-vcard {
background-position: -256px -0px;
}
/* 16px white */
.icon-w.icon-vcard {
background-position: -256px -0px;
}
/* 24px black */
.icon-lg-b.icon-vcard {
background-position: -384px -0px;
}
/* 24px white */
.icon-lg-w.icon-vcard {
background-position: -384px -0px;
}
/* 16px black */
.icon-b.icon-export {
background-position: -272px -0px;
}
/* 16px white */
.icon-w.icon-export {
background-position: -272px -0px;
}
/* 24px black */
.icon-lg-b.icon-export {
background-position: -408px -0px;
}
/* 24px white */
.icon-lg-w.icon-export {
background-position: -408px -0px;
}
/* 16px black */
.icon-b.icon-location {
background-position: -288px -0px;
}
/* 16px white */
.icon-w.icon-location {
background-position: -288px -0px;
}
/* 24px black */
.icon-lg-b.icon-location {
background-position: -432px -0px;
}
/* 24px white */
.icon-lg-w.icon-location {
background-position: -432px -0px;
}
/* 16px black */
.icon-b.icon-map {
background-position: -304px -0px;
}
/* 16px white */
.icon-w.icon-map {
background-position: -304px -0px;
}
/* 24px black */
.icon-lg-b.icon-map {
background-position: -456px -0px;
}
/* 24px white */
.icon-lg-w.icon-map {
background-position: -456px -0px;
}
/* 16px black */
.icon-b.icon-compass {
background-position: -320px -0px;
}
/* 16px white */
.icon-w.icon-compass {
background-position: -320px -0px;
}
/* 24px black */
.icon-lg-b.icon-compass {
background-position: -480px -0px;
}
/* 24px white */
.icon-lg-w.icon-compass {
background-position: -480px -0px;
}
/* 16px black */
.icon-b.icon-direction {
background-position: -336px -0px;
}
/* 16px white */
.icon-w.icon-direction {
background-position: -336px -0px;
}
/* 24px black */
.icon-lg-b.icon-direction {
background-position: -504px -0px;
}
/* 24px white */
.icon-lg-w.icon-direction {
background-position: -504px -0px;
}
/* 16px black */
.icon-b.icon-hair_cross {
background-position: -352px -0px;
}
/* 16px white */
.icon-w.icon-hair_cross {
background-position: -352px -0px;
}
/* 24px black */
.icon-lg-b.icon-hair_cross {
background-position: -528px -0px;
}
/* 24px white */
.icon-lg-w.icon-hair_cross {
background-position: -528px -0px;
}
/* 16px black */
.icon-b.icon-heart {
background-position: -32px -16px;
}
/* 16px white */
.icon-w.icon-heart {
background-position: -32px -16px;
}
/* 24px black */
.icon-lg-b.icon-heart {
background-position: -48px -24px;
}
/* 24px white */
.icon-lg-w.icon-heart {
background-position: -48px -24px;
}
/* 16px black */
.icon-b.icon-heart_empty {
background-position: -48px -16px;
}
/* 16px white */
.icon-w.icon-heart_empty {
background-position: -48px -16px;
}
/* 24px black */
.icon-lg-b.icon-heart_empty {
background-position: -72px -24px;
}
/* 24px white */
.icon-lg-w.icon-heart_empty {
background-position: -72px -24px;
}
/* 16px black */
.icon-b.icon-star {
background-position: -64px -16px;
}
/* 16px white */
.icon-w.icon-star {
background-position: -64px -16px;
}
/* 24px black */
.icon-lg-b.icon-star {
background-position: -96px -24px;
}
/* 24px white */
.icon-lg-w.icon-star {
background-position: -96px -24px;
}
/* 16px black */
.icon-b.icon-star_empty {
background-position: -80px -16px;
}
/* 16px white */
.icon-w.icon-star_empty {
background-position: -80px -16px;
}
/* 24px black */
.icon-lg-b.icon-star_empty {
background-position: -120px -24px;
}
/* 24px white */
.icon-lg-w.icon-star_empty {
background-position: -120px -24px;
}
/* 16px black */
.icon-b.icon-thumbs_up {
background-position: -96px -16px;
}
/* 16px white */
.icon-w.icon-thumbs_up {
background-position: -96px -16px;
}
/* 24px black */
.icon-lg-b.icon-thumbs_up {
background-position: -144px -24px;
}
/* 24px white */
.icon-lg-w.icon-thumbs_up {
background-position: -144px -24px;
}
/* 16px black */
.icon-b.icon-thumbs_down {
background-position: -112px -16px;
}
/* 16px white */
.icon-w.icon-thumbs_down {
background-position: -112px -16px;
}
/* 24px black */
.icon-lg-b.icon-thumbs_down {
background-position: -168px -24px;
}
/* 24px white */
.icon-lg-w.icon-thumbs_down {
background-position: -168px -24px;
}
/* 16px black */
.icon-b.icon-chat {
background-position: -128px -16px;
}
/* 16px white */
.icon-w.icon-chat {
background-position: -128px -16px;
}
/* 24px black */
.icon-lg-b.icon-chat {
background-position: -192px -24px;
}
/* 24px white */
.icon-lg-w.icon-chat {
background-position: -192px -24px;
}
/* 16px black */
.icon-b.icon-comment {
background-position: -144px -16px;
}
/* 16px white */
.icon-w.icon-comment {
background-position: -144px -16px;
}
/* 24px black */
.icon-lg-b.icon-comment {
background-position: -216px -24px;
}
/* 24px white */
.icon-lg-w.icon-comment {
background-position: -216px -24px;
}
/* 16px black */
.icon-b.icon-quote {
background-position: -160px -16px;
}
/* 16px white */
.icon-w.icon-quote {
background-position: -160px -16px;
}
/* 24px black */
.icon-lg-b.icon-quote {
background-position: -240px -24px;
}
/* 24px white */
.icon-lg-w.icon-quote {
background-position: -240px -24px;
}
/* 16px black */
.icon-b.icon-home {
background-position: -176px -16px;
}
/* 16px white */
.icon-w.icon-home {
background-position: -176px -16px;
}
/* 24px black */
.icon-lg-b.icon-home {
background-position: -264px -24px;
}
/* 24px white */
.icon-lg-w.icon-home {
background-position: -264px -24px;
}
/* 16px black */
.icon-b.icon-popup {
background-position: -192px -16px;
}
/* 16px white */
.icon-w.icon-popup {
background-position: -192px -16px;
}
/* 24px black */
.icon-lg-b.icon-popup {
background-position: -288px -24px;
}
/* 24px white */
.icon-lg-w.icon-popup {
background-position: -288px -24px;
}
/* 16px black */
.icon-b.icon-search {
background-position: -208px -16px;
}
/* 16px white */
.icon-w.icon-search {
background-position: -208px -16px;
}
/* 24px black */
.icon-lg-b.icon-search {
background-position: -312px -24px;
}
/* 24px white */
.icon-lg-w.icon-search {
background-position: -312px -24px;
}
/* 16px black */
.icon-b.icon-flashlight {
background-position: -224px -16px;
}
/* 16px white */
.icon-w.icon-flashlight {
background-position: -224px -16px;
}
/* 24px black */
.icon-lg-b.icon-flashlight {
background-position: -336px -24px;
}
/* 24px white */
.icon-lg-w.icon-flashlight {
background-position: -336px -24px;
}
/* 16px black */
.icon-b.icon-print {
background-position: -240px -16px;
}
/* 16px white */
.icon-w.icon-print {
background-position: -240px -16px;
}
/* 24px black */
.icon-lg-b.icon-print {
background-position: -360px -24px;
}
/* 24px white */
.icon-lg-w.icon-print {
background-position: -360px -24px;
}
/* 16px black */
.icon-b.icon-bell {
background-position: -256px -16px;
}
/* 16px white */
.icon-w.icon-bell {
background-position: -256px -16px;
}
/* 24px black */
.icon-lg-b.icon-bell {
background-position: -384px -24px;
}
/* 24px white */
.icon-lg-w.icon-bell {
background-position: -384px -24px;
}
/* 16px black */
.icon-b.icon-link {
background-position: -272px -16px;
}
/* 16px white */
.icon-w.icon-link {
background-position: -272px -16px;
}
/* 24px black */
.icon-lg-b.icon-link {
background-position: -408px -24px;
}
/* 24px white */
.icon-lg-w.icon-link {
background-position: -408px -24px;
}
/* 16px black */
.icon-b.icon-flag {
background-position: -288px -16px;
}
/* 16px white */
.icon-w.icon-flag {
background-position: -288px -16px;
}
/* 24px black */
.icon-lg-b.icon-flag {
background-position: -432px -24px;
}
/* 24px white */
.icon-lg-w.icon-flag {
background-position: -432px -24px;
}
/* 16px black */
.icon-b.icon-cog {
background-position: -304px -16px;
}
/* 16px white */
.icon-w.icon-cog {
background-position: -304px -16px;
}
/* 24px black */
.icon-lg-b.icon-cog {
background-position: -456px -24px;
}
/* 24px white */
.icon-lg-w.icon-cog {
background-position: -456px -24px;
}
/* 16px black */
.icon-b.icon-tools {
background-position: -320px -16px;
}
/* 16px white */
.icon-w.icon-tools {
background-position: -320px -16px;
}
/* 24px black */
.icon-lg-b.icon-tools {
background-position: -480px -24px;
}
/* 24px white */
.icon-lg-w.icon-tools {
background-position: -480px -24px;
}
/* 16px black */
.icon-b.icon-trophy {
background-position: -336px -16px;
}
/* 16px white */
.icon-w.icon-trophy {
background-position: -336px -16px;
}
/* 24px black */
.icon-lg-b.icon-trophy {
background-position: -504px -24px;
}
/* 24px white */
.icon-lg-w.icon-trophy {
background-position: -504px -24px;
}
/* 16px black */
.icon-b.icon-tag {
background-position: -352px -16px;
}
/* 16px white */
.icon-w.icon-tag {
background-position: -352px -16px;
}
/* 24px black */
.icon-lg-b.icon-tag {
background-position: -528px -24px;
}
/* 24px white */
.icon-lg-w.icon-tag {
background-position: -528px -24px;
}
/* 16px black */
.icon-b.icon-camera {
background-position: -0px -32px;
}
/* 16px white */
.icon-w.icon-camera {
background-position: -0px -32px;
}
/* 24px black */
.icon-lg-b.icon-camera {
background-position: -0px -48px;
}
/* 24px white */
.icon-lg-w.icon-camera {
background-position: -0px -48px;
}
/* 16px black */
.icon-b.icon-megaphone {
background-position: -16px -32px;
}
/* 16px white */
.icon-w.icon-megaphone {
background-position: -16px -32px;
}
/* 24px black */
.icon-lg-b.icon-megaphone {
background-position: -24px -48px;
}
/* 24px white */
.icon-lg-w.icon-megaphone {
background-position: -24px -48px;
}
/* 16px black */
.icon-b.icon-moon {
background-position: -32px -32px;
}
/* 16px white */
.icon-w.icon-moon {
background-position: -32px -32px;
}
/* 24px black */
.icon-lg-b.icon-moon {
background-position: -48px -48px;
}
/* 24px white */
.icon-lg-w.icon-moon {
background-position: -48px -48px;
}
/* 16px black */
.icon-b.icon-palette {
background-position: -48px -32px;
}
/* 16px white */
.icon-w.icon-palette {
background-position: -48px -32px;
}
/* 24px black */
.icon-lg-b.icon-palette {
background-position: -72px -48px;
}
/* 24px white */
.icon-lg-w.icon-palette {
background-position: -72px -48px;
}
/* 16px black */
.icon-b.icon-leaf {
background-position: -64px -32px;
}
/* 16px white */
.icon-w.icon-leaf {
background-position: -64px -32px;
}
/* 24px black */
.icon-lg-b.icon-leaf {
background-position: -96px -48px;
}
/* 24px white */
.icon-lg-w.icon-leaf {
background-position: -96px -48px;
}
/* 16px black */
.icon-b.icon-note {
background-position: -80px -32px;
}
/* 16px white */
.icon-w.icon-note {
background-position: -80px -32px;
}
/* 24px black */
.icon-lg-b.icon-note {
background-position: -120px -48px;
}
/* 24px white */
.icon-lg-w.icon-note {
background-position: -120px -48px;
}
/* 16px black */
.icon-b.icon-beamed_note {
background-position: -96px -32px;
}
/* 16px white */
.icon-w.icon-beamed_note {
background-position: -96px -32px;
}
/* 24px black */
.icon-lg-b.icon-beamed_note {
background-position: -144px -48px;
}
/* 24px white */
.icon-lg-w.icon-beamed_note {
background-position: -144px -48px;
}
/* 16px black */
.icon-b.icon-new {
background-position: -112px -32px;
}
/* 16px white */
.icon-w.icon-new {
background-position: -112px -32px;
}
/* 24px black */
.icon-lg-b.icon-new {
background-position: -168px -48px;
}
/* 24px white */
.icon-lg-w.icon-new {
background-position: -168px -48px;
}
/* 16px black */
.icon-b.icon-graduation_cap {
background-position: -128px -32px;
}
/* 16px white */
.icon-w.icon-graduation_cap {
background-position: -128px -32px;
}
/* 24px black */
.icon-lg-b.icon-graduation_cap {
background-position: -192px -48px;
}
/* 24px white */
.icon-lg-w.icon-graduation_cap {
background-position: -192px -48px;
}
/* 16px black */
.icon-b.icon-book {
background-position: -144px -32px;
}
/* 16px white */
.icon-w.icon-book {
background-position: -144px -32px;
}
/* 24px black */
.icon-lg-b.icon-book {
background-position: -216px -48px;
}
/* 24px white */
.icon-lg-w.icon-book {
background-position: -216px -48px;
}
/* 16px black */
.icon-b.icon-newspaper {
background-position: -160px -32px;
}
/* 16px white */
.icon-w.icon-newspaper {
background-position: -160px -32px;
}
/* 24px black */
.icon-lg-b.icon-newspaper {
background-position: -240px -48px;
}
/* 24px white */
.icon-lg-w.icon-newspaper {
background-position: -240px -48px;
}
/* 16px black */
.icon-b.icon-bag {
background-position: -176px -32px;
}
/* 16px white */
.icon-w.icon-bag {
background-position: -176px -32px;
}
/* 24px black */
.icon-lg-b.icon-bag {
background-position: -264px -48px;
}
/* 24px white */
.icon-lg-w.icon-bag {
background-position: -264px -48px;
}
/* 16px black */
.icon-b.icon-airplane {
background-position: -192px -32px;
}
/* 16px white */
.icon-w.icon-airplane {
background-position: -192px -32px;
}
/* 24px black */
.icon-lg-b.icon-airplane {
background-position: -288px -48px;
}
/* 24px white */
.icon-lg-w.icon-airplane {
background-position: -288px -48px;
}
/* 16px black */
.icon-b.icon-lifebuoy {
background-position: -208px -32px;
}
/* 16px white */
.icon-w.icon-lifebuoy {
background-position: -208px -32px;
}
/* 24px black */
.icon-lg-b.icon-lifebuoy {
background-position: -312px -48px;
}
/* 24px white */
.icon-lg-w.icon-lifebuoy {
background-position: -312px -48px;
}
/* 16px black */
.icon-b.icon-eye {
background-position: -224px -32px;
}
/* 16px white */
.icon-w.icon-eye {
background-position: -224px -32px;
}
/* 24px black */
.icon-lg-b.icon-eye {
background-position: -336px -48px;
}
/* 24px white */
.icon-lg-w.icon-eye {
background-position: -336px -48px;
}
/* 16px black */
.icon-b.icon-clock {
background-position: -240px -32px;
}
/* 16px white */
.icon-w.icon-clock {
background-position: -240px -32px;
}
/* 24px black */
.icon-lg-b.icon-clock {
background-position: -360px -48px;
}
/* 24px white */
.icon-lg-w.icon-clock {
background-position: -360px -48px;
}
/* 16px black */
.icon-b.icon-mic {
background-position: -256px -32px;
}
/* 16px white */
.icon-w.icon-mic {
background-position: -256px -32px;
}
/* 24px black */
.icon-lg-b.icon-mic {
background-position: -384px -48px;
}
/* 24px white */
.icon-lg-w.icon-mic {
background-position: -384px -48px;
}
/* 16px black */
.icon-b.icon-calendar {
background-position: -272px -32px;
}
/* 16px white */
.icon-w.icon-calendar {
background-position: -272px -32px;
}
/* 24px black */
.icon-lg-b.icon-calendar {
background-position: -408px -48px;
}
/* 24px white */
.icon-lg-w.icon-calendar {
background-position: -408px -48px;
}
/* 16px black */
.icon-b.icon-bolt {
background-position: -288px -32px;
}
/* 16px white */
.icon-w.icon-bolt {
background-position: -288px -32px;
}
/* 24px black */
.icon-lg-b.icon-bolt {
background-position: -432px -48px;
}
/* 24px white */
.icon-lg-w.icon-bolt {
background-position: -432px -48px;
}
/* 16px black */
.icon-b.icon-thunder_cloud {
background-position: -304px -32px;
}
/* 16px white */
.icon-w.icon-thunder_cloud {
background-position: -304px -32px;
}
/* 24px black */
.icon-lg-b.icon-thunder_cloud {
background-position: -456px -48px;
}
/* 24px white */
.icon-lg-w.icon-thunder_cloud {
background-position: -456px -48px;
}