我是CSS的新手，并遵循视频教程在CSS中创建了一个自定义的切换控件。现在，我想在旋钮上添加一个材料图标，但我很难理解最好的方法。
我尝试将HTML添加到旋钮本身的内容属性中，但后来了解到不应该这样做。所以我找到了另一个例子，显示了一个使用表情符号作为旋钮的旋钮，但这与我试图实现的目标不太一样。这是我迄今为止的代码：
:root{
--scale: 1;
--height: 50px;
--width: 100px;
--knob-diameter: 45px;
--background-inactive: rgb(173, 173, 173);
--background-active: rgb(65, 207, 65);
--knob-color-inactive: rgb(78, 78, 78);
--knob-color-active: rgb(78, 78, 78);
--text-color-inactive: black;
--text-color-active: white;
--text-size: 1rem;
--transition-speed: 0.15s;
}
body{
background: #e5e5e5;
height: 100vh
}
h1{
font-family: Arial, Helvetica, sans-serif;
font-size: 3rem;
text-align: center;
margin: 50px 0;
}
.pwr-tog-container{
position:relative;
width: var(--width);
height: var(--height);
background: red;
}
.pwr-tog-icon{
position: relative;
top: 0;
left: 0;
}
/* Toggle switch body */
.toggle{
display: block;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: var(--width);
height: var(--height);
background: var(--background-inactive);
/* box-shadow: inset 3px 3px rgb(0,0,0); */
border-radius: calc(var(--height) / 2);
position: relative;
transform: scale(var(--scale));
transition-property: background;
transition-duration: var(--transition-speed);
}
/* Toggle switch knob */
.toggle:before{
content: "";
background: var(--knob-color-inactive);
height: var(--knob-diameter);
width: var(--knob-diameter);
position: absolute;
border-radius: 50%;
top: calc((var(--height) - var(--knob-diameter)) / 2);
left: calc((var(--height) - var(--knob-diameter)) / 2);
transition: all var(--transition-speed);
z-index: 2;
}
/* Toggle switch inactive text */
.toggle:after{
content: "OFF";
position: absolute;
font-size: var(--text-size);
color: var(--text-color-inactive);
font-weight: bold;
top: 50%;
left: 50%;
transform: translate(25%, -50%);
z-index: 1;
}
/* Toggle cwitch checked state */
.toggle:checked{
background: var(--background-active);
}
/* Toggle Switch Knob offset */
.toggle:checked::before{
left: calc((var(--height) - var(--knob-diameter)) / 2 + var(--width) - var(--height));
}
.toggle:checked::after{
content: "ON";
left: 5%;
color: var(--text-color-active);
}<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1>Toggle Switch</h1>
<center>
<div class=".pwr-tog-container">
<input type="checkbox", class="toggle">
<i class ="material-icons pwr-tog-icon">power_settings_new</i>
</div>
</center>
</body>我为表情符号切换引用的网站是这样的：https://codepen.io/chriscoyier/pen/EVamGp
非常感谢您的帮助！
我建议使用已经用于旋钮的伪元素，并为符号应用字体家族unicode。请参阅下面对.toggle:before伪类的更改。干杯
PS-如果您在没有calc()功能的情况下获得额外积分；(
:root{
--scale: 1;
--height: 50px;
--width: 100px;
--knob-diameter: 45px;
--background-inactive: rgb(173, 173, 173);
--background-active: rgb(65, 207, 65);
--knob-color-inactive: rgb(78, 78, 78);
--knob-color-active: rgb(78, 78, 78);
--text-color-inactive: black;
--text-color-active: white;
--text-size: 1rem;
--transition-speed: 0.15s;
}
body{
background: #e5e5e5;
height: 100vh
}
h1{
font-family: Arial, Helvetica, sans-serif;
font-size: 3rem;
text-align: center;
margin: 50px 0;
}
.pwr-tog-container{
position:relative;
width: var(--width);
height: var(--height);
background: red;
}
.pwr-tog-icon{
position: relative;
top: 0;
left: 0;
}
/* Toggle switch body */
.toggle{
display: block;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: var(--width);
height: var(--height);
background: var(--background-inactive);
/* box-shadow: inset 3px 3px rgb(0,0,0); */
border-radius: calc(var(--height) / 2);
position: relative;
transform: scale(var(--scale));
transition-property: background;
transition-duration: var(--transition-speed);
}
/* Toggle switch knob */
.toggle:before{
/* BEGIN NEW STUFF */
display: flex;
align-items: center;
justify-content: center;
font-family: "Material Icons";
content: "e8ac";
font-size: 2rem;
color: #f00;
transition: color .35s ease;
/* END NEW STUFF */
background: var(--knob-color-inactive);
height: var(--knob-diameter);
width: var(--knob-diameter);
position: absolute;
border-radius: 50%;
top: calc((var(--height) - var(--knob-diameter)) / 2);
left: calc((var(--height) - var(--knob-diameter)) / 2);
transition: all var(--transition-speed);
z-index: 2;
}
/* Toggle switch inactive text */
.toggle:after{
content: "OFF";
position: absolute;
font-size: var(--text-size);
color: var(--text-color-inactive);
font-weight: bold;
top: 50%;
left: 50%;
transform: translate(25%, -50%);
z-index: 1;
}
/* Toggle cwitch checked state */
.toggle:checked{
background: var(--background-active);
}
/* Toggle Switch Knob offset */
.toggle:checked::before{
color: #0f0;
left: calc((var(--height) - var(--knob-diameter)) / 2 + var(--width) - var(--height));
}
.toggle:checked::after{
content: "ON";
left: 5%;
color: var(--text-color-active);
}<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1>Toggle Switch</h1>
<center>
<div class=".pwr-tog-container">
<input type="checkbox", class="toggle">
<i class ="material-icons pwr-tog-icon">power_settings_new</i>
</div>
</center>
</body>