Как убрать этот баг в checbox?

Question

[Hyubert]

если без текста то все нормально

codepen.io/anon/pen/PZrgLv

<div class="brands">
                brands<br>
                    <input id='check_1' name='check' type='checkbox'>
                    <label class='check' for='check_1'>Apple<i class="fa"></i></label>
                    <input id='check_2' name='check' type='checkbox'>
                    <label class='check' for='check_2'>JBL<i class="fa"></i></label>
                    <input id='check_3' name='check' type='checkbox'>
                    <label class='check' for='check_3'>Bose<i class="fa"></i></label>
                    <input id='check_4' name='check' type='checkbox'>
                    <label class='check' for='check_4'>Nest<i class="fa"></i></label>
            </div>

.brands{
    border-radius: 5px;
    margin-top: 30px;
    background: #fff;
    width: 270px;
    font: 600 14px/30px 'Myriad Pro Regular', Arial;
    color: #3e425a;
    text-transform: uppercase;
    padding: 20px 25px;
}
.brands label{
    font: 600 14px/20px 'Myriad Pro Regular', Arial;
    color: #a1a7bd;
    text-transform: capitalize;
    
}
input[type='checkbox'] {
  display: none;
}
label.check {
  display: block;
  width: 25px;
  height: 25px;
  margin: 10px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
label.check {
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px #ccc;
}
label.check .fa {
  display: block;
  width: 25px;
  height: 25px;
  background: url(http://savepic.net/7750571m.png) no-repeat 50% 50%;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
input[type='checkbox']:checked + label {
  background: #00e2aa;
  box-shadow: none;
}
input[type='checkbox']:checked + label .fa {
  opacity: 1;
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}

Спасибо.

Answer 1

[Андрей Федоров]

codepen.io/aliencash/pen/JGQqoZ

Comments

[Hyubert]

появился какой то margin, не могу понять где он , добаваил скрин

Answer 2

[Владислав Яндимиркин]

codepen.io/anon/pen/wMLbaa
попробуй ставить текст после иконки а дальше разберешься

Comments

[Hyubert]

появился какой то margin, не могу понять где он , добаваил скрин

[Владислав Яндимиркин]

это не margin, это у тебя строка с текстом вывалилась на другую строку, а вообще можно просто текст отдельным блоком рядом делать, сделать позицию чекбокса relative, а блока с текстом внутри absolute и вертеть куда захочешь

[Hyubert]

Влад |trycontrolmymind|: пробовал , но ето конкретный костиль получаеться , никак не могу убрать , наверное прийдетса сам чекбок как-то переписать

[Владислав Яндимиркин]

можешь тогда с помощью javascript добавить data-* атрибут и его трансформировать после рендера

[Hyubert]

Влад |trycontrolmymind|: возможно....., буду думать