checkbox icone google in firefox

0

I'm having a problem with a checkbox in firefox.

I mounted it like this:

.checkbox { 
        display:none; 
    } 
    .checkbox + label:before {
        font-family: 'Material Icons';
        display: inline-block;
        color: #0091FF;
        transform: scale(2.1);
        margin: 10px;
    }
    .checkbox + label:before { 
        content: "check_box_outline_blank"; 
    }
    .checkbox + label:before { 
        letter-spacing: 8px; 
    } 
    .checkbox:checked + label:before { 
        content: "check_box"; 
    }
<!-- Material Icons (Google) -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


<input type='checkbox' id='checkbox1' class='checkbox' name='checkbox1'><label for='checkbox1'></label>

It's running on Chrome, Safari. But in FireFox not. Does anyone know why?

    
asked by anonymous 14.03.2017 / 17:16

1 answer

3

Remove the letter-spacing: 8px of the CSS that will resolve.

See the need for this style, if you need to, you'll have to find out why Firefox has this problem.

    
15.03.2017 / 12:26