jQuery 如何将 Font Awesome 用于复选框等
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11223615/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use Font Awesome for checkboxes etc
提问by user1460887
I'm using Font Awesomefor icons in my website. I'm pretty new to HTML & CSS. I was trying to use this for checkboxes, and had hard time in figuring out how I could use it to enable / disable checkbox and get the approrpiate icon shown.
我在我的网站上使用Font Awesome作为图标。我对 HTML 和 CSS 很陌生。我试图将它用于复选框，并且很难弄清楚如何使用它来启用/禁用复选框并显示适当的图标。
For Example; I'm using the below tags for checkbox:
例如; 我正在为复选框使用以下标签：
<div style="font-size: 24px;">
<i id="prime" type="checkbox" class="icon-check-empty"></i>icon-check
</div>
I'm using the below jQuery to change the icon when the checkbox is enabled/disabled:
当复选框启用/禁用时，我正在使用以下 jQuery 更改图标：
$(".icon-check-empty").click(function(){
$('#prime').removeClass('icon-check-empty');
$('#prime').addClass('icon-check');
});
I'm sure this would not be the way how it should be used. Can you please guide me what should be the way how it should be used.
我敢肯定这不会是它应该如何使用的方式。你能指导我应该如何使用它。
For now; I want to use the check-boxes, and my goal is to check/uncheck the check-box, and show it's corresponding icon. When checked: icon-check ; unchecked: icon-check-empty
目前; 我想使用复选框，我的目标是选中/取消选中复选框，并显示它的相应图标。选中时： icon-check ; 未选中：icon-check-empty
Please guide me !!
请指导我！！
采纳答案by Ghokun
$("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');}
});?
Change yourselectorpart as you wish
yourselector根据需要更改部分
回答by konsumer
Here is my simple CSS-only method:
这是我的简单 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 */
}
The basic idea is to select spans:before that is next toinput you want. I made an example with checkboxes & radios. If you are using less/sass, you could just include the .icon-glass:before declarations, to make it all easier to maintain & modify.
基本思想是选择 spans:before旁边是您想要的输入。我用复选框和收音机做了一个例子。如果您使用的是 less/sass，您可以只包含 .icon-glass:before 声明，以使其更易于维护和修改。
As a side-note, you can style things however you like using this method, so change color, background, shadow-color, icons, etc.
作为旁注，您可以使用此方法随意设置样式，因此更改颜色、背景、阴影颜色、图标等。
You can get the character to add using the FontAwesome source.
您可以使用FontAwesome 源获取要添加的字符。
selectivizrsupports :before & :checked, so if you are supporting IE6-8, use that to support IE6+:
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]-->
回答by Svakinn
Many of the fancy check box solutions out there have the flaw of removing the original input checkbox in the way that it does not receive input focus.
This is not acceptable for two reasons:
那里的许多花哨的复选框解决方案都有一个缺陷，即以不接收输入焦点的方式删除原始输入复选框。
这是不可接受的，原因有二：
- You cannot use the keyboard (the
Tab-keyandspacebar) to navigate to the checkbox and change its value. - You cannot apply hover and focused styles on the checkbox.
- 您不能使用键盘（
Tab-key和spacebar）导航到复选框并更改其值。 - 您不能在复选框上应用悬停和聚焦样式。
The solution above by @konsumer is nice but is lacking the input focus ability.
However I came across
implementationby @geoffrey_crofte where the input focus works. However it is perhaps not as fancy as @konsumers
@konsumer 上面的解决方案很好，但缺乏输入焦点能力。但是，我遇到
了 @geoffrey_crofte 的
实现，其中输入焦点有效。然而，它可能不像@konsumers 那样花哨
So.. I combined those two and put out a plunker example. The only downside to this solution is that you must use a specific html markup for this to work:
所以..我将这两者结合起来并推出了一个plunker 示例。此解决方案的唯一缺点是您必须使用特定的 html 标记才能使其工作：
<input type="checkbox" class="fancy-check" id="myId"/>
<label for="myId" ><span>The label text</span></label>
The checkbox must be followed by a label tag. The labeltag then can include a spantag including the label text.
复选框后必须跟一个标签标记。在label随后的标签可以包括span包括标签文本标签。
I also made it a requirement to use the class fancy-checkto the new styles to be applied. This is to avoid the styles destroying other checkboxes in the page that are missing the required, following labeltag.
我还要求将类fancy-check用于要应用的新样式。这是为了避免样式破坏页面中缺少所需的跟随label标记的其他复选框。
The example is based on using icon fonts, in this case it requires the FontAwesome library.
该示例基于使用图标字体，在这种情况下，它需要FontAwesome 库。
The stylesheet is here:
样式表在这里：
/*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;
}
回答by iRaS
If you are running jQuery you could use something like this..
如果你正在运行 jQuery 你可以使用这样的东西..
Extend 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();
});
And then use this in your html:
然后在你的 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>
And some basic css and you have a shiny checkbox:
还有一些基本的 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;
}
回答by fernandodof
Take a look at this: http://codepen.io/jamesbarnett/pen/yILjk
看看这个：http: //codepen.io/jamesbarnett/pen/yILjk
here is the code that worked for me, from the link above.
这是对我有用的代码，来自上面的链接。
/*** 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;
}
回答by Rich Oren
Here is a all CSS example that is very clean.
这是一个非常干净的全 CSS 示例。
.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; }
