ionicons更换图标

我使用的一个项目Ionicons，并已取代了标准的图像进行无线电和复选框与这些icons.The问题我已经是实际的默认项通过Ionicons显示呈现时复选框，并radion按钮。ionicons更换图标

我有以下HTML：

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

我也有下面的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; 
}

不过，尽管复选框/单选按钮的行为正确，我可以看到ionicon低于标准项目。这是由于图标具有透明背景吗？

我试图改变不透明度为100％，但它并没有帮助。

来源

2016-03-29 TheRealPapa