Css 动画复选框用字体替换SVG

我在这里创建了一个复选框动画。目前正在使用SVG作为记号，如何用字体替换它

输入[类型=复选框]{
不透明度：0；
浮动：左；
}
输入[类型=复选框]+标签{
利润率：0.20px；
位置：相对位置；
光标：指针；
字体大小：16px；
字体系列：monospace；
浮动：左；
}
输入[类型=复选框]+标签~标签{
利润率：0.40px；
}
输入[类型=复选框]+标签：：之前{
内容：''；
位置：绝对位置；
左：-35px；
顶部：-3px；
宽度：25px；
高度：25px；
显示：块；
背景：白色；
边框：1px实心#A9A9；
}
输入[类型=复选框]+标签：：后{
内容：''；
位置：绝对位置；
左：-35px；
顶部：-3px；
宽度：23px；
高度：23px；
显示：块；
z指数：1；
背景：url数据：数据：图像/svg+xml；Bas64，基本64，基本4，基本4，基本4，基本4，基本4，基本4，基本4，基本4，基本4，基本4，基本3，基本3，基本3，我的vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv6，vzzzzxxxxCB3中国政府的GGGGGGG8（GG8）G8（G8（8）G8-8）在数据数据。8）是一个中国政府的数据。数据。数据：数据。数据。数据：数据：数据：数据：数据：数据：数据：数据：数据：数据：数据：数据：数据：数据：数据：数据：数据：数据：数据：数据：数据：数据：数据：数据：数据：数据：图像：图像：数据：数据：图像：数据：图像（数据：图像：图像：JMXLJIGMXLJIGMXLJIGMTEZIDEXM2M4LJYGOC42IDIGUNIAZINBsmtezMLTEZYYA1MJQTNTI0YZTMTAUM2Ltm2Ltm2Ltm2Ltm2Ltm2Ltm2Ltm2Ltm2LmXLmXlJigmtzIg2Ig4Ig9Ig0Ig0IgzNzM3mZcIIg9Ig9IkCunZcUnZcIg9Ig9Ig9IkCunZcUnZcUnZcUnZcUnZcUnZcUnZcUm42最短长度最短长度最短长度最短最短最短最短最短最短最短长度最短最短最短最短长度最短长度最短长度最短长度最短长度最短长度最短长度最短长度最短长度最短长度最短长度最短长度最EtLjV6Ii8+PHBHDGGGZD0ITTEXODCUMBUNTYUNS0NI41YY01LJETNS4xletyltuums0ny4xIDBSLti1YIDI1YIDI1YLTEWNI4YYY01LJETNS4xletyltuums0ny4xIDBSLtu2JungtyUnmumTn4xUm01LJEGMMCAXN4xBDEXNc43IdU2IdU2IdUdUdUdUdUdUdUdUdUdUdUdUdUdUdUdUdUm4xNy4xNy4xNdUdUdUdUdUdUdUdUdUdUdUdUdUdUdUdUdUdUdUdUdUdUdUm2Y2Y2YUm2YY2Y2ZLJQTOC42LTMUNC0XMIAWBC0XNJKUNSAXNJKUNS03MC4YLTCXLJLTMUNC0ZLJQTOC42LTMUNC0ZNY43IDM3LJDJLTMUNCAZLJQTMY40IDGUNI0IDDC3LJEGNZCUMSAZNY43IDM3LJDMY40IDMUNCA4 YGYGYGYDYDYDYDYZZZNYNYDYDYDYDYDYDYDYDYDYNYNYDYL3LJGMS42LTYU0YOS0UMS0YZZNYNYNYZNYNYNYNYZZZYNYNYNYLJJJJJJJ；
-ms转换：所有。2秒轻松；
-webkit过渡：所有.2s轻松；
过渡：全部。3秒轻松；
-ms变换：尺度（0）；
-webkit变换：缩放（0）；
变换：比例（0）；
不透明度：0；
}
输入[类型=复选框]：选中+标签：：后{
-ms变换：尺度（1）；
-webkit转换：规模（1）；
变换：比例（1）；
不透明度：1；
}

是还是不是

您可以执行此操作，并根据需要调整

左侧

、

顶部

和

字体大小

值

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

---

输入[类型=复选框]{
不透明度：0；
浮动：左；
}
输入[类型=复选框]+标签{
利润率：0.20px；
位置：相对位置；
光标：指针；
字体大小：16px；
字体系列：monospace；
浮动：左；
}
输入[类型=复选框]+标签~标签{
利润率：0.40px；
}
输入[类型=复选框]+标签：：之前{
内容：''；
位置：绝对位置；
左：-35px；
顶部：-3px；
宽度：25px；
高度：25px；
显示：块；
背景：白色；
边框：1px实心#A9A9；
}
输入[类型=复选框]+标签：：后{
字体系列：Fontsome；
内容：'\f00c'；
位置：绝对位置；
左：-35px；
顶部：-3px；
宽度：23px；
高度：23px；
显示：块；
z指数：1；
-ms转换：所有。2秒轻松；
-webkit过渡：所有.2s轻松；
过渡：全部。3秒轻松；
-ms变换：尺度（0）；
-webkit变换：缩放（0）；
变换：比例（0）；
不透明度：0；
}
输入[类型=复选框]：选中+标签：：后{
-ms变换：尺度（1）；
-webkit转换：规模（1）；
变换：比例（1）；
不透明度：1；
}

是还是不是

您可以执行此操作，并根据需要调整

左侧

、

顶部

和

字体大小

值

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

---

输入[类型=复选框]{
不透明度：0；
浮动：左；
}
输入[类型=复选框]+标签{
利润率：0.20px；
位置：相对位置；
光标：指针；
字体大小：16px；
字体系列：monospace；
浮动：左；
}
输入[类型=复选框]+标签~标签{
利润率：0.40px；
}
输入[类型=复选框]+标签：：之前{
内容：''；
位置：绝对位置；
左：-35px；
顶部：-3px；
宽度：25px；
高度：25px；
显示：块；
背景：白色；
边框：1px实心#A9A9；
}
输入[类型=复选框]+标签：：后{
字体系列：Fontsome；
内容：'\f00c'；
位置：绝对位置；
左：-35px；
顶部：-3px；
宽度：23px；
高度：23px；
显示：块；
z指数：1；
-ms转换：所有。2秒轻松；
-webkit过渡：所有.2s轻松；
过渡：全部。3秒轻松；
-ms变换：尺度（0）；
-webkit变换：缩放（0）；
变换：比例（0）；
不透明度：0；
}
输入[类型=复选框]：选中+标签：：后{
-ms变换：尺度（1）；
-webkit转换：规模（1）；
变换：比例（1）；
不透明度：1；
}

是还是不是

根据需要，您可以执行以下操作：

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库，根据需要，您可以执行以下操作：

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库，这感觉像是一个“为我编写代码”的问题。你似乎拥有99%的所需代码，你只需要调整它……这是你至少应该在提问之前尝试的事情。你可能需要在内容中包含代码，例如：

\f107

@Paulie\u D-i尝试了下面的内容方式，我的问题是我忘了在内容中添加“f”：“f…”这感觉像是一个“为我编写代码”的问题。您似乎拥有99%的所需代码，您只需修改它…这是您在询问之前至少应该尝试的事情。您可能需要在内容中添加代码，例如：

\f1