ionicons ersetzen Kontrollkästchen und Radion Schaltflächen mit Symbolen

Question

Ich verwende Ionicons auf ein Projekt und habe die Standardbilder für Radio und Kontrollkästchen mit diesen Symbolen ersetzt.Das Problem, das ich habe, ist die tatsächliche Standard-Elemente zeigen durch die Ionen, wenn gerendert.

Ich habe folgende HTML:

<input type="checkbox" 
     name="client{!! $client->uuid !!}" 
     class="checkbox-icon ion-android-checkbox-outline-blank" checked> 

Ich habe auch die folgenden CSS:

.checkbox-icon:before, 
.radio-icon:before { 
    visibility: visible; 
    font-size: 20px; 
} 

.checkbox-icon.ion-android-checkbox-outline-blank:checked:before { 
    content: "\f374";  // icon for selected 
    font-size: 20px; 
    color: $brand-primary; 
} 

.radio-icon.ion-ios-circle-outline:checked:before { 
    content: "\f120";  // icon for selected 
    font-size: 20px; 
    color: $brand-primary; 
} 

input[type=checkbox].checkbox-icon.ion-android-checkbox-blank, 
input[type=radio].radio-icon.ion-record { 
    visibility: hidden; 
} 

Aber obwohl die Kontrollkästchen/Optionsfelder korrekt verhält, kann ich den Standard-Element unter der IONICON sehen . Liegt das daran, dass das Symbol einen transparenten Hintergrund hat?

Ich habe versucht, die Deckkraft auf 100% zu ändern, aber es hat nicht geholfen.

Answer 1

Ich habe die benutzerdefinierte checkbox erstellt und mit dem gleichen Konzept können Sie die radio button auch erstellen. Für jetzt habe ich das normale (Farbwechsel) Checkbox erstellt, aber Sie können es nach Ihren eigenen Anforderungen anpassen. Bitte folgen Sie dem unten genannten Link:

URL: https://jsfiddle.net/qq92vbcm/