动画复选框与字体真棒取代SVG(Animating checkbox replace SVG wit

我创建了一个CodePen这里，动画的复选框。 目前正在使用的蜱一个SVG，我怎么能与字体取代它呢？ 例子 。

 input[type=checkbox] { opacity: 0; float: left; } input[type=checkbox] + label { margin: 0 0 0 20px; position: relative; cursor: pointer; font-size: 16px; font-family: monospace; float: left; } input[type=checkbox] + label ~ label { margin: 0 0 0 40px; } input[type=checkbox] + label::before { content: ' '; position: absolute; left: -35px; top: -3px; width: 25px; height: 25px; display: block; background: white; border: 1px solid #A9A9A9; } input[type=checkbox] + label::after { content: ' '; position: absolute; left: -35px; top: -3px; width: 23px; height: 23px; display: block; z-index: 1; background: url('data:image/svg+xml;base64,+==') no-repeat center center; -ms-transition: all .2s ease; -webkit-transition: all .2s ease; transition: all .3s ease; -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); opacity: 0; } input[type=checkbox]:checked + label::after { -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 

 <fieldset> <input id="ham" type="checkbox" name="toppings" value="ham"> <label for="ham">Yay or Nay</label> </fieldset> 

Answer 1:

你可以这样做，并调整left ， top和font-size为需要的值。

input[type=checkbox] + label::after {
    font-family: FontAwesome;
    content: '\f00c';
}

---

 input[type=checkbox] { opacity: 0; float:left; } input[type=checkbox] + label { margin: 0 0 0 20px; position: relative; cursor: pointer; font-size: 16px; font-family: monospace; float: left; } input[type=checkbox] + label ~ label { margin: 0 0 0 40px; } input[type=checkbox] + label::before { content: ' '; position: absolute; left: -35px; top: -3px; width: 25px; height: 25px; display: block; background: white; border: 1px solid #A9A9A9; } input[type=checkbox] + label::after { font-family: FontAwesome; content: '\f00c'; position: absolute; left: -35px; top: -3px; width: 23px; height: 23px; display: block; z-index: 1; -ms-transition: all .2s ease; -webkit-transition: all .2s ease; transition: all .3s ease; -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); opacity: 0; } input[type=checkbox]:checked + label::after { -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 

 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <form method="post" action="/"> <fieldset> <input id="ham" type="checkbox" name="toppings" value="ham"> <label for="ham">Yay or Nay</label> </fieldset> </form> 

---

按照此链接了解如何包括字体真棒到您的项目。

Answer 2:

根据使用字体真棒图标没有标签 ，你可以这样做：

input[type=checkbox] + label::after {
  content: '\f00c';
  font-family: FontAwesome;
  font-size: 20px;
  position: absolute;
  left: -32px;
  top: 0px;
  width: 23px;
  height: 23px;
  display: block;
  z-index: 1;;
  -ms-transition: all .2s ease;
  -webkit-transition: all .2s ease;
  transition: all .3s ease;
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0;
}

当然，你必须加载font-awesome的CSS librairy <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

文章来源: Animating checkbox replace SVG with Font Awesome