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-lock_open {
background-position: -16px -80px;
}
/* 16px white */
.icon-w.icon-lock_open {
background-position: -16px -80px;
}
/* 24px black */
.icon-lg-b.icon-lock_open {
background-position: -24px -120px;
}
/* 24px white */
.icon-lg-w.icon-lock_open {
background-position: -24px -120px;
}
/* 16px black */
.icon-b.icon-logout {
background-position: -32px -80px;
}
/* 16px white */
.icon-w.icon-logout {
background-position: -32px -80px;
}
/* 24px black */
.icon-lg-b.icon-logout {
background-position: -48px -120px;
}
/* 24px white */
.icon-lg-w.icon-logout {
background-position: -48px -120px;
}
/* 16px black */
.icon-b.icon-login {
background-position: -48px -80px;
}
/* 16px white */
.icon-w.icon-login {
background-position: -48px -80px;
}
/* 24px black */
.icon-lg-b.icon-login {
background-position: -72px -120px;
}
/* 24px white */
.icon-lg-w.icon-login {
background-position: -72px -120px;
}
/* 16px black */
.icon-b.icon-check {
background-position: -64px -80px;
}
/* 16px white */
.icon-w.icon-check {
background-position: -64px -80px;
}
/* 24px black */
.icon-lg-b.icon-check {
background-position: -96px -120px;
}
/* 24px white */
.icon-lg-w.icon-check {
background-position: -96px -120px;
}
/* 16px black */
.icon-b.icon-cross {
background-position: -80px -80px;
}
/* 16px white */
.icon-w.icon-cross {
background-position: -80px -80px;
}
/* 24px black */
.icon-lg-b.icon-cross {
background-position: -120px -120px;
}
/* 24px white */
.icon-lg-w.icon-cross {
background-position: -120px -120px;
}
/* 16px black */
.icon-b.icon-squared_minus {
background-position: -96px -80px;
}
/* 16px white */
.icon-w.icon-squared_minus {
background-position: -96px -80px;
}
/* 24px black */
.icon-lg-b.icon-squared_minus {
background-position: -144px -120px;
}
/* 24px white */
.icon-lg-w.icon-squared_minus {
background-position: -144px -120px;
}
/* 16px black */
.icon-b.icon-squared_plus {
background-position: -112px -80px;
}
/* 16px white */
.icon-w.icon-squared_plus {
background-position: -112px -80px;
}
/* 24px black */
.icon-lg-b.icon-squared_plus {
background-position: -168px -120px;
}
/* 24px white */
.icon-lg-w.icon-squared_plus {
background-position: -168px -120px;
}
/* 16px black */
.icon-b.icon-squared_cross {
background-position: -128px -80px;
}
/* 16px white */
.icon-w.icon-squared_cross {
background-position: -128px -80px;
}
/* 24px black */
.icon-lg-b.icon-squared_cross {
background-position: -192px -120px;
}
/* 24px white */
.icon-lg-w.icon-squared_cross {
background-position: -192px -120px;
}
/* 16px black */
.icon-b.icon-circled_minus {
background-position: -144px -80px;
}
/* 16px white */
.icon-w.icon-circled_minus {
background-position: -144px -80px;
}
/* 24px black */
.icon-lg-b.icon-circled_minus {
background-position: -216px -120px;
}
/* 24px white */
.icon-lg-w.icon-circled_minus {
background-position: -216px -120px;
}
/* 16px black */
.icon-b.icon-circled_plus {
background-position: -160px -80px;
}
/* 16px white */
.icon-w.icon-circled_plus {
background-position: -160px -80px;
}
/* 24px black */
.icon-lg-b.icon-circled_plus {
background-position: -240px -120px;
}
/* 24px white */
.icon-lg-w.icon-circled_plus {
background-position: -240px -120px;
}
/* 16px black */
.icon-b.icon-circled_cross {
background-position: -176px -80px;
}
/* 16px white */
.icon-w.icon-circled_cross {
background-position: -176px -80px;
}
/* 24px black */
.icon-lg-b.icon-circled_cross {
background-position: -264px -120px;
}
/* 24px white */
.icon-lg-w.icon-circled_cross {
background-position: -264px -120px;
}
/* 16px black */
.icon-b.icon-minus {
background-position: -192px -80px;
}
/* 16px white */
.icon-w.icon-minus {
background-position: -192px -80px;
}
/* 24px black */
.icon-lg-b.icon-minus {
background-position: -288px -120px;
}
/* 24px white */
.icon-lg-w.icon-minus {
background-position: -288px -120px;
}
/* 16px black */
.icon-b.icon-plus {
background-position: -208px -80px;
}
/* 16px white */
.icon-w.icon-plus {
background-position: -208px -80px;
}
/* 24px black */
.icon-lg-b.icon-plus {
background-position: -312px -120px;
}
/* 24px white */
.icon-lg-w.icon-plus {
background-position: -312px -120px;
}
/* 16px black */
.icon-b.icon-erase {
background-position: -224px -80px;
}
/* 16px white */
.icon-w.icon-erase {
background-position: -224px -80px;
}
/* 24px black */
.icon-lg-b.icon-erase {
background-position: -336px -120px;
}
/* 24px white */
.icon-lg-w.icon-erase {
background-position: -336px -120px;
}
/* 16px black */
.icon-b.icon-block {
background-position: -240px -80px;
}
/* 16px white */
.icon-w.icon-block {
background-position: -240px -80px;
}
/* 24px black */
.icon-lg-b.icon-block {
background-position: -360px -120px;
}
/* 24px white */
.icon-lg-w.icon-block {
background-position: -360px -120px;
}
/* 16px black */
.icon-b.icon-circled_help {
background-position: -304px -80px;
}
/* 16px white */
.icon-w.icon-circled_help {
background-position: -304px -80px;
}
/* 24px black */
.icon-lg-b.icon-circled_help {
background-position: -456px -120px;
}
/* 24px white */
.icon-lg-w.icon-circled_help {
background-position: -456px -120px;
}
/* 16px black */
.icon-b.icon-help {
background-position: -288px -80px;
}
/* 16px white */
.icon-w.icon-help {
background-position: -288px -80px;
}
/* 24px black */
.icon-lg-b.icon-help {
background-position: -432px -120px;
}
/* 24px white */
.icon-lg-w.icon-help {
background-position: -432px -120px;
}
/* 16px black */
.icon-b.icon-circled_info {
background-position: -272px -80px;
}
/* 16px white */
.icon-w.icon-circled_info {
background-position: -272px -80px;
}
/* 24px black */
.icon-lg-b.icon-circled_info {
background-position: -408px -120px;
}
/* 24px white */
.icon-lg-w.icon-circled_info {
background-position: -408px -120px;
}
/* 16px black */
.icon-b.icon-info {
background-position: -256px -80px;
}
/* 16px white */
.icon-w.icon-info {
background-position: -256px -80px;
}
/* 24px black */
.icon-lg-b.icon-info {
background-position: -384px -120px;
}
/* 24px white */
.icon-lg-w.icon-info {
background-position: -384px -120px;
}
/* 16px black */
.icon-b.icon-warning {
background-position: -320px -80px;
}
/* 16px white */
.icon-w.icon-warning {
background-position: -320px -80px;
}
/* 24px black */
.icon-lg-b.icon-warning {
background-position: -480px -120px;
}
/* 24px white */
.icon-lg-w.icon-warning {
background-position: -480px -120px;
}
/* 16px black */
.icon-b.icon-cycle {
background-position: -336px -80px;
}
/* 16px white */
.icon-w.icon-cycle {
background-position: -336px -80px;
}
/* 24px black */
.icon-lg-b.icon-cycle {
background-position: -504px -120px;
}
/* 24px white */
.icon-lg-w.icon-cycle {
background-position: -504px -120px;
}
/* 16px black */
.icon-b.icon-cw {
background-position: -352px -80px;
}
/* 16px white */
.icon-w.icon-cw {
background-position: -352px -80px;
}
/* 24px black */
.icon-lg-b.icon-cw {
background-position: -528px -120px;
}
/* 24px white */
.icon-lg-w.icon-cw {
background-position: -528px -120px;
}
/* 16px black */
.icon-b.icon-ccw {
background-position: -0px -96px;
}
/* 16px white */
.icon-w.icon-ccw {
background-position: -0px -96px;
}
/* 24px black */
.icon-lg-b.icon-ccw {
background-position: -0px -144px;
}
/* 24px white */
.icon-lg-w.icon-ccw {
background-position: -0px -144px;
}
/* 16px black */
.icon-b.icon-chuffle {
background-position: -16px -96px;
}
/* 16px white */
.icon-w.icon-chuffle {
background-position: -16px -96px;
}
/* 24px black */
.icon-lg-b.icon-chuffle {
background-position: -24px -144px;
}
/* 24px white */
.icon-lg-w.icon-chuffle {
background-position: -24px -144px;
}
/* 16px black */
.icon-b.icon-back {
background-position: -32px -96px;
}
/* 16px white */
.icon-w.icon-back {
background-position: -32px -96px;
}
/* 24px black */
.icon-lg-b.icon-back {
background-position: -48px -144px;
}
/* 24px white */
.icon-lg-w.icon-back {
background-position: -48px -144px;
}
/* 16px black */
.icon-b.icon-level_down {
background-position: -48px -96px;
}
/* 16px white */
.icon-w.icon-level_down {
background-position: -48px -96px;
}
/* 24px black */
.icon-lg-b.icon-level_down {
background-position: -72px -144px;
}
/* 24px white */
.icon-lg-w.icon-level_down {
background-position: -72px -144px;
}
/* 16px black */
.icon-b.icon-retweet {
background-position: -64px -96px;
}
/* 16px white */
.icon-w.icon-retweet {
background-position: -64px -96px;
}
/* 24px black */
.icon-lg-b.icon-retweet {
background-position: -96px -144px;
}
/* 24px white */
.icon-lg-w.icon-retweet {
background-position: -96px -144px;
}
/* 16px black */
.icon-b.icon-loop {
background-position: -80px -96px;
}
/* 16px white */
.icon-w.icon-loop {
background-position: -80px -96px;
}
/* 24px black */
.icon-lg-b.icon-loop {
background-position: -120px -144px;
}
/* 24px white */
.icon-lg-w.icon-loop {
background-position: -120px -144px;
}
/* 16px black */
.icon-b.icon-back_in_time {
background-position: -96px -96px;
}
/* 16px white */
.icon-w.icon-back_in_time {
background-position: -96px -96px;
}
/* 24px black */
.icon-lg-b.icon-back_in_time {
background-position: -144px -144px;
}
/* 24px white */
.icon-lg-w.icon-back_in_time {
background-position: -144px -144px;
}
/* 16px black */
.icon-b.icon-level_up {
background-position: -112px -96px;
}
/* 16px white */
.icon-w.icon-level_up {
background-position: -112px -96px;
}
/* 24px black */
.icon-lg-b.icon-level_up {
background-position: -168px -144px;
}
/* 24px white */
.icon-lg-w.icon-level_up {
background-position: -168px -144px;
}
/* 16px black */
.icon-b.icon-switch {
background-position: -128px -96px;
}
/* 16px white */
.icon-w.icon-switch {
background-position: -128px -96px;
}
/* 24px black */
.icon-lg-b.icon-switch {
background-position: -192px -144px;
}
/* 24px white */
.icon-lg-w.icon-switch {
background-position: -192px -144px;
}
/* 16px black */
.icon-b.icon-numbered_list {
background-position: -144px -96px;
}
/* 16px white */
.icon-w.icon-numbered_list {
background-position: -144px -96px;
}
/* 24px black */
.icon-lg-b.icon-numbered_list {
background-position: -216px -144px;
}
/* 24px white */
.icon-lg-w.icon-numbered_list {
background-position: -216px -144px;
}
/* 16px black */
.icon-b.icon-add_to_list {
background-position: -160px -96px;
}
/* 16px white */
.icon-w.icon-add_to_list {
background-position: -160px -96px;
}
/* 24px black */
.icon-lg-b.icon-add_to_list {
background-position: -240px -144px;
}
/* 24px white */
.icon-lg-w.icon-add_to_list {
background-position: -240px -144px;
}
/* 16px black */
.icon-b.icon-layout {
background-position: -176px -96px;
}
/* 16px white */
.icon-w.icon-layout {
background-position: -176px -96px;
}
/* 24px black */
.icon-lg-b.icon-layout {
background-position: -264px -144px;
}
/* 24px white */
.icon-lg-w.icon-layout {
background-position: -264px -144px;
}
/* 16px black */
.icon-b.icon-list {
background-position: -192px -96px;
}
/* 16px white */
.icon-w.icon-list {
background-position: -192px -96px;
}
/* 24px black */
.icon-lg-b.icon-list {
background-position: -288px -144px;
}
/* 24px white */
.icon-lg-w.icon-list {
background-position: -288px -144px;
}
/* 16px black */
.icon-b.icon-text_doc {
background-position: -208px -96px;
}
/* 16px white */
.icon-w.icon-text_doc {
background-position: -208px -96px;
}
/* 24px black */
.icon-lg-b.icon-text_doc {
background-position: -312px -144px;
}
/* 24px white */
.icon-lg-w.icon-text_doc {
background-position: -312px -144px;
}
/* 16px black */
.icon-b.icon-text_doc_inverted {
background-position: -224px -96px;
}
/* 16px white */
.icon-w.icon-text_doc_inverted {
background-position: -224px -96px;
}
/* 24px black */
.icon-lg-b.icon-text_doc_inverted {
background-position: -336px -144px;
}
/* 24px white */
.icon-lg-w.icon-text_doc_inverted {
background-position: -336px -144px;
}
/* 16px black */
.icon-b.icon-doc {
background-position: -240px -96px;
}
/* 16px white */
.icon-w.icon-doc {
background-position: -240px -96px;
}
/* 24px black */
.icon-lg-b.icon-doc {
background-position: -360px -144px;
}
/* 24px white */
.icon-lg-w.icon-doc {
background-position: -360px -144px;
}
/* 16px black */
.icon-b.icon-docs {
background-position: -256px -96px;
}
/* 16px white */
.icon-w.icon-docs {
background-position: -256px -96px;
}
/* 24px black */
.icon-lg-b.icon-docs {
background-position: -384px -144px;
}
/* 24px white */
.icon-lg-w.icon-docs {
background-position: -384px -144px;
}
/* 16px black */
.icon-b.icon-landscape_doc {
background-position: -272px -96px;
}
/* 16px white */
.icon-w.icon-landscape_doc {
background-position: -272px -96px;
}
/* 24px black */
.icon-lg-b.icon-landscape_doc {
background-position: -408px -144px;
}
/* 24px white */
.icon-lg-w.icon-landscape_doc {
background-position: -408px -144px;
}
/* 16px black */
.icon-b.icon-picture {
background-position: -288px -96px;
}
/* 16px white */
.icon-w.icon-picture {
background-position: -288px -96px;
}
/* 24px black */
.icon-lg-b.icon-picture {
background-position: -432px -144px;
}
/* 24px white */
.icon-lg-w.icon-picture {
background-position: -432px -144px;
}
/* 16px black */
.icon-b.icon-video {
background-position: -304px -96px;
}
/* 16px white */
.icon-w.icon-video {
background-position: -304px -96px;
}
/* 24px black */
.icon-lg-b.icon-video {
background-position: -456px -144px;
}
/* 24px white */
.icon-lg-w.icon-video {
background-position: -456px -144px;
}
/* 16px black */
.icon-b.icon-music {
background-position: -320px -96px;
}
/* 16px white */
.icon-w.icon-music {
background-position: -320px -96px;
}
/* 24px black */
.icon-lg-b.icon-music {
background-position: -480px -144px;
}
/* 24px white */
.icon-lg-w.icon-music {
background-position: -480px -144px;
}
/* 16px black */
.icon-b.icon-folder {
background-position: -336px -96px;
}
/* 16px white */
.icon-w.icon-folder {
background-position: -336px -96px;
}
/* 24px black */
.icon-lg-b.icon-folder {
background-position: -504px -144px;
}
/* 24px white */
.icon-lg-w.icon-folder {
background-position: -504px -144px;
}
/* 16px black */
.icon-b.icon-archive {
background-position: -352px -96px;
}
/* 16px white */
.icon-w.icon-archive {
background-position: -352px -96px;
}
/* 24px black */
.icon-lg-b.icon-archive {
background-position: -528px -144px;
}
/* 24px white */
.icon-lg-w.icon-archive {
background-position: -528px -144px;
}
/* 16px black */
.icon-b.icon-trash {
background-position: -0px -112px;
}
/* 16px white */
.icon-w.icon-trash {
background-position: -0px -112px;
}
/* 24px black */
.icon-lg-b.icon-trash {
background-position: -0px -168px;
}
/* 24px white */
.icon-lg-w.icon-trash {
background-position: -0px -168px;
}
/* 16px black */
.icon-b.icon-upload {
background-position: -16px -112px;
}
/* 16px white */
.icon-w.icon-upload {
background-position: -16px -112px;
}
/* 24px black */
.icon-lg-b.icon-upload {
background-position: -24px -168px;
}
/* 24px white */
.icon-lg-w.icon-upload {
background-position: -24px -168px;
}
/* 16px black */
.icon-b.icon-download {
background-position: -32px -112px;
}
/* 16px white */
.icon-w.icon-download {
background-position: -32px -112px;
}
/* 24px black */
.icon-lg-b.icon-download {
background-position: -48px -168px;
}
/* 24px white */
.icon-lg-w.icon-download {
background-position: -48px -168px;
}
/* 16px black */
.icon-b.icon-save {
background-position: -48px -112px;
}
/* 16px white */
.icon-w.icon-save {
background-position: -48px -112px;
}
/* 24px black */
.icon-lg-b.icon-save {
background-position: -72px -168px;
}
/* 24px white */
.icon-lg-w.icon-save {
background-position: -72px -168px;
}
/* 16px black */
.icon-b.icon-install {
background-position: -64px -112px;
}
/* 16px white */
.icon-w.icon-install {
background-position: -64px -112px;
}
/* 24px black */
.icon-lg-b.icon-install {
background-position: -96px -168px;
}
/* 24px white */
.icon-lg-w.icon-install {
background-position: -96px -168px;
}
/* 16px black */
.icon-b.icon-cloud {
background-position: -80px -112px;
}
/* 16px white */
.icon-w.icon-cloud {
background-position: -80px -112px;
}
/* 24px black */
.icon-lg-b.icon-cloud {
background-position: -120px -168px;
}
/* 24px white */
.icon-lg-w.icon-cloud {
background-position: -120px -168px;
}
/* 16px black */
.icon-b.icon-upload_cloud {
background-position: -96px -112px;
}
/* 16px white */
.icon-w.icon-upload_cloud {
background-position: -96px -112px;
}
/* 24px black */
.icon-lg-b.icon-upload_cloud {
background-position: -144px -168px;
}
/* 24px white */
.icon-lg-w.icon-upload_cloud {
background-position: -144px -168px;
}
/* 16px black */
.icon-b.icon-bookmark {
background-position: -112px -112px;
}
/* 16px white */
.icon-w.icon-bookmark {
background-position: -112px -112px;
}
/* 24px black */
.icon-lg-b.icon-bookmark {
background-position: -168px -168px;
}
/* 24px white */
.icon-lg-w.icon-bookmark {
background-position: -168px -168px;
}
/* 16px black */
.icon-b.icon-bookmarks {
background-position: -128px -112px;
}
/* 16px white */
.icon-w.icon-bookmarks {
background-position: -128px -112px;
}
/* 24px black */
.icon-lg-b.icon-bookmarks {
background-position: -192px -168px;
}
/* 24px white */
.icon-lg-w.icon-bookmarks {
background-position: -192px -168px;
}
/* 16px black */
.icon-b.icon-open_book {
background-position: -144px -112px;
}
/* 16px white */
.icon-w.icon-open_book {
background-position: -144px -112px;
}
/* 24px black */
.icon-lg-b.icon-open_book {
background-position: -216px -168px;
}
/* 24px white */
.icon-lg-w.icon-open_book {
background-position: -216px -168px;
}
/* 16px black */
.icon-b.icon-play {
background-position: -160px -112px;
}
/* 16px white */
.icon-w.icon-play {
background-position: -160px -112px;
}
/* 24px black */
.icon-lg-b.icon-play {
background-position: -240px -168px;
}
/* 24px white */
.icon-lg-w.icon-play {
background-position: -240px -168px;
}
/* 16px black */
.icon-b.icon-paus {
background-position: -176px -112px;
}
/* 16px white */
.icon-w.icon-paus {
background-position: -176px -112px;
}
/* 24px black */
.icon-lg-b.icon-paus {
background-position: -264px -168px;
}
/* 24px white */
.icon-lg-w.icon-paus {
background-position: -264px -168px;
}
/* 16px black */
.icon-b.icon-record {
background-position: -192px -112px;
}
/* 16px white */
.icon-w.icon-record {
background-position: -192px -112px;
}
/* 24px black */
.icon-lg-b.icon-record {
background-position: -288px -168px;
}
/* 24px white */
.icon-lg-w.icon-record {
background-position: -288px -168px;
}
/* 16px black */
.icon-b.icon-stop {
background-position: -208px -112px;
}
/* 16px white */
.icon-w.icon-stop {
background-position: -208px -112px;
}
/* 24px black */
.icon-lg-b.icon-stop {
background-position: -312px -168px;
}
/* 24px white */
.icon-lg-w.icon-stop {
background-position: -312px -168px;
}
/* 16px black */
.icon-b.icon-ff {
background-position: -224px -112px;
}
/* 16px white */
.icon-w.icon-ff {
background-position: -224px -112px;
}
/* 24px black */
.icon-lg-b.icon-ff {
background-position: -336px -168px;
}
/* 24px white */
.icon-lg-w.icon-ff {
background-position: -336px -168px;
}
/* 16px black */
.icon-b.icon-fb {
background-position: -240px -112px;
}
/* 16px white */
.icon-w.icon-fb {
background-position: -240px -112px;
}
/* 24px black */
.icon-lg-b.icon-fb {
background-position: -360px -168px;
}
/* 24px white */
.icon-lg-w.icon-fb {
background-position: -360px -168px;
}
/* 16px black */
.icon-b.icon-to_start {
background-position: -256px -112px;
}
/* 16px white */
.icon-w.icon-to_start {
background-position: -256px -112px;
}
/* 24px black */
.icon-lg-b.icon-to_start {
background-position: -384px -168px;
}
/* 24px white */
.icon-lg-w.icon-to_start {
background-position: -384px -168px;
}
/* 16px black */
.icon-b.icon-to_end {
background-position: -272px -112px;
}
/* 16px white */
.icon-w.icon-to_end {
background-position: -272px -112px;
}
/* 24px black */
.icon-lg-b.icon-to_end {
background-position: -408px -168px;
}
/* 24px white */
.icon-lg-w.icon-to_end {
background-position: -408px -168px;
}
/* 16px black */
.icon-b.icon-resize_full {
background-position: -288px -112px;
}
/* 16px white */
.icon-w.icon-resize_full {
background-position: -288px -112px;
}
/* 24px black */
.icon-lg-b.icon-resize_full {
background-position: -432px -168px;
}
/* 24px white */
.icon-lg-w.icon-resize_full {
background-position: -432px -168px;
}
/* 16px black */
.icon-b.icon-resize_small {
background-position: -304px -112px;
}
/* 16px white */
.icon-w.icon-resize_small {
background-position: -304px -112px;
}
/* 24px black */
.icon-lg-b.icon-resize_small {
background-position: -456px -168px;
}
/* 24px white */
.icon-lg-w.icon-resize_small {
background-position: -456px -168px;
}
/* 16px black */
.icon-b.icon-volume {
background-position: -320px -112px;
}
/* 16px white */
.icon-w.icon-volume {
background-position: -320px -112px;
}
/* 24px black */
.icon-lg-b.icon-volume {
background-position: -480px -168px;
}
/* 24px white */
.icon-lg-w.icon-volume {
background-position: -480px -168px;
}