Change speaker icon

index.css

@@ -132,8 +132,8 @@ td {
  .switch {
     position: relative;
     display: inline-block;
-    width: 64px;
-    height: 38px;
+    width: 128px;
+    height: 128px;
   }
   
   /* Hide default HTML checkbox */
@@ -151,42 +151,18 @@ td {
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: #ccc;
-    -webkit-transition: .4s;
-    transition: .4s;
-  }
-  
-  .slider:before {
-    position: absolute;
-    content: "";
-    height: 30px;
-    width: 30px;
-    left: 4px;
-    bottom: 4px;
-    background-color: white;
+    width: 128px;
+    height: 128px;
+    background-color: red;
+    background-image: url("assets/speaker.png");
     -webkit-transition: .4s;
     transition: .4s;
   }
   
   input:checked + .slider {
-    background-color: #2196F3;
+    background-color: #00FF00 !important;
   }
   
   input:focus + .slider {
-    box-shadow: 0 0 1px #2196F3;
-  }
-  
-  input:checked + .slider:before {
-    -webkit-transform: translateX(26px);
-    -ms-transform: translateX(26px);
-    transform: translateX(26px);
-  }
-  
-  /* Rounded sliders */
-  .slider.round {
-    border-radius: 38px;
-  }
-  
-  .slider.round:before {
-    border-radius: 50%;
-  } 
+    box-shadow: 0 0 1px #00FF00 !important;
+  }

index.html

@@ -73,7 +73,7 @@
                     <td>
                         <label class="switch" id="switchcontaineraudio">
                             <input type="checkbox" id="audiocheckbox" checked>
-                            <span class="slider round" id="visualcheckbox"></span>
+                            <span class="slider fixbgimage" id="visualcheckbox"></span>
                         </label>
                     </td>
                 </tr>