web-dev-qa-db-ja.com

チェックボックスなどにFont Awesomeを使用する方法

Webサイトのアイコンに Font Awesome を使用しています。 HTMLとCSSは初めてです。これをチェックボックスに使用しようとしていましたが、チェックボックスを有効/無効にして適切なアイコンを表示する方法を理解するのに苦労しました。

例えば;チェックボックスに以下のタグを使用しています：

<div style="font-size: 24px;">
<i id="prime" type="checkbox" class="icon-check-empty"></i>icon-check
</div>

以下のjQueryを使用して、チェックボックスが有効/無効になっているときにアイコンを変更しています。

$(".icon-check-empty").click(function(){
    $('#prime').removeClass('icon-check-empty');
    $('#prime').addClass('icon-check');
});

これは、それがどのように使用されるべきであるかではないと確信しています。使い方を教えてください。

今のところ;チェックボックスを使用したいのですが、私の目標は、チェックボックスをオン/オフにして、対応するアイコンを表示することです。チェックした場合：icon-check;オフ：icon-check-empty

案内してください!!

jquerycsstwitter-bootstrapfont-awesome
16
user1460887
$("yourselector").click(function(){
    if($(this).hasClass('icon-check')){
        $(this).removeClass('icon-check').addClass('icon-check-empty');}
    else {
        $(this).removeClass('icon-check-empty').addClass('icon-check');}
});​

yourselectorパーツを必要に応じて変更します

8
Ghokun

これが私の シンプルなCSSのみのメソッド です。

input[type="radio"],
input[type="checkbox"] {
  display:none;
}

input[type="radio"] + span:before,
input[type="checkbox"] + span:before {
  font-family: 'FontAwesome';
  padding-right: 3px;
  font-size: 20px;
}

input[type="radio"] + span:before {
  content: "\f10c"; /* circle-blank */
}

input[type="radio"]:checked + span:before {
  content: "\f111"; /* circle */
}

input[type="checkbox"] + span:before {
  content: "\f096"; /* check-empty */
}

input[type="checkbox"]:checked + span:before {
  content: "\f046"; /* check */
}

基本的な考え方は、スパンを選択することです：その前に、次に必要な入力があります。チェックボックスとラジオの例を作りました。 less/sassを使用している場合は、.icon-glass：before宣言を含めるだけで、すべてのメンテナンスと変更が簡単になります。

補足として、この方法を使用して好きなようにスタイルを設定できるので、色、背景、影の色、アイコンなどを変更します。

FontAwesome source を使用して、追加するキャラクターを取得できます。

selectivizr は：before＆：checkedをサポートしているため、IE6-8をサポートしている場合は、それを使用してIE6 +をサポートします。

<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"</script>
<noscript><link rel="stylesheet" href="[fallback css that display:inline-block radios & checkboxes]" /></noscript>
<![endif]-->
47
konsumer

そこにある派手なチェックボックスソリューションの多くには、元の入力チェックボックスが入力フォーカスを受け取らない方法で削除されるという欠点があります。
これは、次の2つの理由で許容できません。

  1. キーボード（Tab-keyおよびspacebar）を使用してチェックボックスに移動し、その値を変更することはできません。
  2. チェックボックスにホバースタイルとフォーカススタイルを適用することはできません。

上記の@konsumerによる解決策は素晴らしいですが、入力フォーカス機能がありません。しかし、私は出会いました
実装 入力フォーカスが機能する@geoffrey_crofteによって。しかし、おそらく@konsumersほど豪華ではありません

だから..私はそれらの2つを組み合わせて、 プランカーの例 を出しました。このソリューションの唯一の欠点は、これを機能させるために特定のHTMLマークアップを使用する必要があることです。

<input type="checkbox" class="fancy-check" id="myId"/>
<label for="myId" ><span>The label text</span></label>

チェックボックスの後にはラベルタグが必要です。 labelタグには、ラベルテキストを含むspanタグを含めることができます。

また、適用する新しいスタイルにfancy-checkクラスを使用することを要件にしました。これは、labelタグに続いて、スタイルが必須で欠落しているページ内の他のチェックボックスを破壊するのを防ぐためです。

この例はアイコンフォントの使用に基づいており、この場合は FontAwesomeライブラリ が必要です。

スタイルシートはここにあります：

/*Move he original checkbox out of the way */
[type="checkbox"].fancy-check {
  position: absolute;
  left: -9999px;
}
/*Align the icon and the label text to same height using tabl-cell display*/
/*If you change the font-size of the text, you may also want to do som padding or alignhment changes here*/
.fancy-check ~ label >  span {
  display: table-cell;
  vertical-align: middle;
  padding-left: 5px;
}
/*The label will contain the icon and the text, will grab the focus*/
[type="checkbox"].fancy-check + label {
  cursor: pointer;
  display: table;
}
/*The icon container, set it to fixed size and font size, the padding is to align the border*/
/*If you change the font-size of this icon, be sure to adjust the min-width as well*/
[type="checkbox"].fancy-check + label:before {
  font-family: 'FontAwesome';
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid transparent;
  font-size: 22px;
  min-width: 28px;
  padding: 2px 0 0 3px;
}
/* toggle font awsome icon*/
[type="checkbox"].fancy-check:checked + label:before {
  content: "\f046";
}
[type="checkbox"].fancy-check:not(:checked) + label:before {
  content: "\f096";    
}
/*Do something on focus, in this case show dashed border*/
[type="checkbox"].fancy-check:focus + label:before {
  border: 1px dashed #777;
}
/*Do something on hover, in this case change the image color*/
[type="checkbox"].fancy-check:hover + label:before {
   color: #67afe5;
}
11
Svakinn

JQueryを実行している場合は、次のようなものを使用できます。

JQueryを拡張します。

jQuery.fn.extend({
  shinyCheckbox:
    function() {
      var setIcon = function($el) {
        var checkbox = $el.find('input[type=checkbox]');
        var iclass = '';
        if (checkbox.is(':checked')) {
          var iclass = 'icon-check';
        } else {
          var iclass = 'icon-check-empty';
        }
        $el.find('i[class^=icon-]').removeClass('icon-check').removeClass('icon-check-empty').addClass(iclass);
      }
      this.find('input[type=checkbox]').change(function() {
        setIcon($(this).parents('label.checkbox'));
      });
      this.each(function(i, el) {
        setIcon($(el));
      });
    }  
});

$(document).ready(function() {
  $('label.checkbox').shinyCheckbox();
});

そして、これをあなたのhtmlで使用してください：

<label class="checkbox" for="mycheckbox">
  <i class="icon-check-empty"></i>
  <input type="hidden" name="mycheckbox" value="0" />
  <input id="mycheckbox" name="mycheckbox" type="checkbox" value="1" checked="checked" />
  Meine Checkbox hat einen sehr langen Text
</label>

そしていくつかの基本的なCSSとあなたは光沢のあるチェックボックスを持っています：

input[type="checkbox"] {
    display: none;
}
label.checkbox {
    cursor: pointer;
    display: inline-block;
    margin-left: 1px;
    padding-left: 15px; /* maybe this is not enough for your font size - remember: it's just an example and not best practice */
}
label.checkbox .icon-check:before, label.checkbox .icon-check-empty:before {
    margin-left: -15px;
    padding-right: 3px;
}
4
iRaS

これを見てください： http://codepen.io/jamesbarnett/pen/yILjk

上記のリンクから私のために働いたコードはここにあります。

/*** custom checkboxes ***/

input[type=checkbox] { 
    display:none; 
} 

/* to hide the checkbox itself */
input[type=checkbox] + label:before {
  font-family: FontAwesome;
  display: inline-block;
}

input[type=checkbox] + label:before {
    content: "\f096"; 
} 

/* unchecked icon */
input[type=checkbox] + label:before {    
    letter-spacing: 10px; 
} 

/* space between checkbox and label */
input[type=checkbox]:checked + label:before {
    content: "\f046"; 
} 

/* checked icon */
input[type=checkbox]:checked + label:before { 
    letter-spacing: 5px; 
}
1
fernandodof

以下は、非常にクリーンなすべてのCSSの例です。

http://jsfiddle.net/8wLBJ/

.checkbox-container { width: 100%; height: 30px; padding: 0 0 0 10px; margin: 5px 0 0 0; border-radius: 3px; background-color: #e5e5e5; }
.checkbox-container label { float: left; padding: 0; margin-top: 7px; }
.checkbox-container label .checkBoxTitle {width: 200px; margin-top: -1px; font-size: 12px;}

.newCheck[type="checkbox"]:not(:checked), .newCheck[type="checkbox"]:checked { position: absolute; left: -9999px;}
.newCheck[type="checkbox"]:not(:checked) + label, .newCheck[type="checkbox"]:checked + label { width: 150px; position: absolute; cursor: pointer; }
.newCheck[type="checkbox"]:not(:checked) + label:before,   .newCheck[type="checkbox"]:checked + label:before { content: ''; position: absolute; left: 0; top: -1px; width: 17px; height: 17px; border: 1px solid #aaa; background: #f8f8f8; border-radius: 3px; box-shadow: inset 0 1px 3px rgba(0,0,0,.1);}
.newCheck[type="checkbox"]:not(:checked) + label:after,    .newCheck[type="checkbox"]:checked + label:after { content: '\f00c'; font-family: FontAwesome; padding-right: 5px; position: absolute; top: -8px; left: 0;  font-size: 20px; color: #555;}
.newCheck[type="checkbox"]:not(:checked) + label:after { opacity: 0;}
.newCheck[type="checkbox"]:checked + label:after { opacity: 1;}
.newCheck[type="checkbox"]:checked + label span, .newCheck[type="checkbox"]:not(:checked) + label span { position:absolute; left:25px; }
0
Rich Oren