尝试将 material 图标添加到自定义切换开关旋钮 (HTML/CSS)

Question

我是 CSS 的新手，按照 video tutorial 在 CSS 中创建了自定义切换控件。现在，我想在旋钮上添加一个 material 图标，但我正在努力了解实现它的最佳方法。

我尝试将 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

非常感谢任何帮助！

Answer 1

我建议使用您已经在旋钮中使用的伪元素，并为符号应用字体系列 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>

尝试将 material 图标添加到自定义切换开关旋钮 (HTML/CSS)

Trying to add a material Icon to a custom toggle switch knob (HTML/CSS)

html

css

toggleswitch

material-icons