ioniconsは、チェックボックスとラジオボタンをアイコンで置き換えます。

私はプロジェクトにIoniconsを使用しています。ラジオとチェックボックスの標準イメージをこれらのアイコンに置き換えました。実際のデフォルトアイテムはレンダリング時にIoniconsを通して表示されます。ioniconsは、チェックボックスとラジオボタンをアイコンで置き換えます。

私は次のようなHTMLがあります。私はまた、以下のCSS持っ

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

を：

.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; 
}

をしかし、チェックボックス/ラジオボタンが正しく動作しますが、私はionicon以下の標準項目を見ることができます。透明な背景を持つアイコンのためですか？

不透明度を100％に変更しようとしましたが、それは役に立たなかった。

出典

2016-03-29 TheRealPapa