Как использовать шрифт Awesome для флажков и т. д

вот мой простой 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: перед объявлениями, чтобы упростить обслуживание и изменение.

в качестве примечания вы можете стилизовать вещи, как вам нравится, используя этот метод, поэтому измените цвет, фон, цвет тени, значки, так далее.

вы можете получить символ для добавления с помощью FontAwesome source.

selectivizr supports: 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]-->

многие из решений fancy check box там имеют недостаток удаления исходного флажка ввода таким образом, что он не получает фокус ввода.
Это неприемлемо по двум причинам:--10-->

1. вы не можете использовать клавиатуру (Tab-key и spacebar), чтобы перейти к флажку и изменить его значение.
2. вы не можете применить стили наведения и фокусировки на флажке.

решение выше @konsumer приятно, но это отсутствует способность фокусировки ввода. Однако я наткнулся
реализация @geoffrey_crofte, где работает фокус ввода. Однако это, возможно, не так причудливо, как @konsumers

так.. Я объединил эти два и выпустил пример plunker. Единственным недостатком этого решения является то, что вы должны использовать определенную разметку html для этого:

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

за флажком должен следовать тег label. The 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;
}

Если вы используете 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;
}

взгляните на это: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; 
} 

вот пример 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; }