如何使用Font Awesome用于复选框等
如何使用Font Awesome用于复选框等
提问于 2012-06-27 17:57:29
我在我的网站上使用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');
});我肯定这不是它应该如何使用的方式。你能告诉我应该怎么使用它吗？
现在，我想使用复选框，我的目标是选中/取消选中该复选框，并显示其相应的图标。选中时:图标-检查；未选中:图标-检查-空
请给我指引！
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-06-27 18:16:12
$("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部件
Stack Overflow用户
发布于 2012-11-15 06:26:49
如果你运行的是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;
}Stack Overflow用户
发布于 2014-11-16 22:23:25
看看这个：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;
} 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11223615
复制相关文章
相似问题