如何使用Font Awesome复选框等

Question

我在我的网站上使用Font Awesome作为图标.我是HTML和CSS的新手.我试图将它用于复选框,并且很难弄清楚如何使用它来启用/禁用复选框并显示显示的approrpiate图标.

例如; 我正在使用以下标签复选框:

<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

请指导我!!

Answer 1

这是我简单的CSS-only方法:

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源获取要添加的角色.

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]-->

Answer 2

许多花哨的复选框解决方案都存在以无法接收输入焦点的方式删除原始输入复选框的缺陷.
这是不可接受的,原因有两个:

1. 您无法使用键盘(Tab-key和spacebar)导航到复选框并更改其值.
2. 您无法在复选框上应用悬停和聚焦样式.

@konsumer上面的解决方案很不错,但缺乏输入焦点能力.但是我遇到 了@geoffrey_crofte
实现的输入焦点.然而,它可能不像@konsumers那样华丽

所以..我把这两个结合起来,并提出了一个掠夺者的例子.此解决方案的唯一缺点是您必须使用特定的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;
}

Answer 3

$("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根据需要更改零件