logo标签列表

如何使用 Font Awesome 来制作复选框等元素

jquerycsstwitter-bootstrapfont-awesome
16

我在我的网站中使用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');
});

我相信这不是应该使用的方式。请指导我应该如何使用。

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

请指导我!!

http://alt-checkbox.starikovs.com/ 是一个很好的例子。它是一个jQuery插件，可以使用图标字体和CSS样式来美化复选框。 - starikovs
6个回答
47

这里是我简单的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 */
}

基本思路是选择与所需输入相邻的spans:before。我使用复选框和单选按钮举了一个例子。如果您使用less/sass，您可以直接包含.icon-glass:before的声明，以使其更易于维护和修改。

顺便提一下，您可以使用此方法随意样式化，例如更改颜色、背景、阴影颜色、图标等。

您可以通过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]-->
字体大小使其比使用原始元素的字体大小更好地对齐（如果它是Bootstrap默认值）。 - konsumer
如果你不想要更大的元素，可以随意不设置那一行。这并不是“错误”的，只是一个使用纯CSS样式来自定义的例子，我认为这比其他答案更优雅。你可以根据自己的需要改变它的外观，去掉字体大小，或者将它设置为任何你想要的图标，就像这里所示：http://jsfiddle.net/8PYJg/7/ - konsumer
非常好。值得注意的是，font-awesome 4.0.3中的复选框图标大小不同，因此当您单击它时，标签会移动，这让人有点恼火：http://jsfiddle.net/zacharyyates/yyvBP/（示例加一些额外的样式） - Zachary Yates
1
您真是个天才，先生！我刚刚为了固定宽度，将一些 display:inline-block; width:3em; 添加到代码中，而不是使用 padding-right。 - fboes
2
有人向我指出了一篇展示花式复选框CSS解决方案的帖子，其中支持Tab键： http://codepen.io/CreativeJuiz/pen/zqKtp - Svakinn
显示剩余4条评论
11
许多时髦的复选框解决方案都存在一个缺陷，即以一种方式删除原始输入复选框，以使其无法接收输入焦点。这有两个原因是不可接受的：
  1. 您无法使用键盘（Tab键和空格键）导航到复选框并更改其值。
  2. 您无法在复选框上应用悬停和聚焦样式。
@konsumer提出的解决方案很好，但缺乏输入焦点功能。 不过，我遇到了@geoffrey_crofte的实现，其中输入焦点起作用。然而，它可能不像@konsumer的那么花哨。
所以……我将它们两个结合起来，并发布了一个plunker示例。 这种解决方案唯一的缺点是您必须使用特定的HTML标记才能让它起作用：
<input type="checkbox" class="fancy-check" id="myId"/>
<label for="myId" ><span>The label text</span></label>

复选框后必须跟随一个标签（label）标签。 label标签可以包含一个带有文本的标签。

我还要求使用类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;
}
1
我刚把这个东西加入到一个项目中，效果非常好！我使用了Fontello而不是FontAwesome，但它几乎没有出现任何问题。我还扩展了你的CSS来处理单选按钮。 - Michel Floyd
1
谢谢这个，我也在我的项目中使用它，非常满意。 - MichalCh
1
我分叉了这个解决方案，以便也可以使用动态字体大小：http://plnkr.co/edit/i5aqNtt3VTwTg0u21DCV?p=preview - z00l
8
$("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部分更改为您想要的内容。

这总是运行到else部分。我猜测:checked属性对我的输入元素不可用。你能看看我错在哪里吗？非常感谢！！ - user1460887
更新了我的答案，看到你正在使用 Font Awesome。 - Ghokun
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中使用以下内容：
<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;
}
1

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

这是一个非常干净的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; }
你应该解释一下解决方案的主要思路。 - MasterAM
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接