如何使用Font Awesome复选框等

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

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

 icon-check  

启用/禁用复选框时，我使用以下jQuery更改图标：

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

我确信这不应该是应该如何使用的方式。 你能指导我应该如何使用它的方式。

目前; 我想使用复选框，我的目标是选中/取消选中复选框，并显示相应的图标。 选中时：icon-check; 未选中：icon-check-empty

请指导我!!

Answer 1

 $("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部件

Answer 2

这是我简单的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 +：

Answer 3

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

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

@konsumer的上述解决方案很不错，但缺乏输入焦点能力。 但是我遇到了
由@geoffrey_crofte 实现输入焦点的工作原理。 然而，它可能不像@konsumers那样华丽

所以..我把这两个结合起来并推出了一个有关的例子 。 此解决方案的唯一缺点是您必须使用特定的html标记才能工作：

  The label text 

复选框后面必须跟一个标签标签。 然后， 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 4

如果你正在运行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中使用它：

     Meine Checkbox hat einen sehr langen Text  

还有一些基本的CSS，你有一个shiny的复选框：

 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; } 

Answer 5

看看这个： 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; } 

Answer 6

这是一个非常干净的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; }