How to put a image in a span - css

Question

I've made a toggle with the following CSS:
.switch {
position: relative;
display: inline-block;
width: 55px;
height: 25px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 34px;
-webkit-transition: .2s;
transition: .2s;
}
.slider:before {
position: absolute;
content: "";
height: 25px;
width: 25px;
left: 0px;
bottom: 0px;
background-color: white;
border-radius: 50%;
-webkit-transition: .2s;
transition: .2s;
}
input:checked + .slider:before {
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
}
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
Span needs to have an image inside, and when is checked another image, it should look like this:
Need to achieve this with CSS/React.

Answer 1

I was able to make something out:
* {
font-family: 'Open Sans', 'Segoe UI';
}
.switch {
position: relative;
display: inline-block;
width: 55px;
height: 25px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 34px;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.slider:before {
position: absolute;
content: "";
height: 25px;
width: 25px;
left: 0px;
bottom: 0px;
background-image: url('https://i.imgur.com/J4GQTYs.png');
background-size: contain;
border-radius: 50%;
-webkit-transition: 0.2s;
transition: 0.2s;
}
input:checked + .slider:before {
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
background-image: url('https://i.imgur.com/Q0iHcOX.png');
}
input:checked ~ .unchecked,
input ~ .unchecked,
input ~ .checked {
position: absolute;
font-weight: 600;
display: none;
top: 1px;
}
.unchecked {
right: 5px;
}
.checked {
left: 5px;
}
input:checked ~ .checked,
input ~ .unchecked {
display: block;
}
<label class="switch">
<input type="checkbox" />
<span class="slider round"></span>
<span class="checked">FR</span>
<span class="unchecked">EN</span>
</label>

Answer 2

You can add:
background-image: url(IMAGE); for the image and background-size: contain; to make it visiable. Only using the background-image property won't work.
I added them to your example to: slider:before {} and input:checked + .slider:before {} to get the effect you're looking for. I've used different images as you stated as I couldn't find them so quickly. But of course you can just edit the url to the images you prefer (please don't use external images as I did in this example, add them to your server).
.switch {
position: relative;
display: inline-block;
width: 55px;
height: 25px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 34px;
-webkit-transition: .2s;
transition: .2s;
}
.slider:before {
position: absolute;
content: "";
height: 25px;
width: 25px;
left: 0px;
bottom: 0px;
background-color: white;
border-radius: 50%;
-webkit-transition: .2s;
transition: .2s;
background-image: url('https://cdn1.iconfinder.com/data/icons/european-country-flags/83/italy-512.png');
background-size: contain;
}
input:checked + .slider:before {
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
background-image: url('https://cdn1.iconfinder.com/data/icons/european-country-flags/83/france-512.png');
background-size: contain;
}
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>