FontAwesome 5 Использование флажка Bootstrap в шаблоне SmartAdmin

Я использую шаблон SmartAdmin v1.9.1 с Angular 5. Он поставляется с FontAwesome v4.7.3 Pro и использует Bootstrap v3.3.6. Я обновил FA до версии 5.10.0, используя npm install --save-dev @fortawesome/fontawesome-free.

Мой вопрос не является дубликатом этого вопроса SO, но похож.

Обновление прошло гладко, просто нужно было изменить несколько иконок.

Я не могу отобразить значок флажка Bootstrap. С v4.7.3 он отображался нормально, но теперь я получаю маленькое поле, где должен быть значок галочки - см. ниже.

CSS ниже показывает стиль флажка. Я пробовал другой контент, кроме '\f00c', но та же проблема. Корректировка шрифта: приводит к изменению размера, но маленькое поле остается.

Соответствующий HTML:

<section>
  <label class="checkbox">
    <input type="checkbox" name="remember" checked (click)="doCheckbox()">
    <i></i>Stay signed in</label>
</section>

Соответствующий CSS:

.smart-form .checkbox input + i:after {
  content: '\f00c';
  top: -1px;
  left: 1px;
  width: 15px;
  height: 15px;
  font: normal 16px/19px FontAwesome;
  text-align: center;
}
.smart-form .checkbox input:checked:hover + i:after {
  content: '\f00d';
}
.smart-form .checkbox input:checked:disabled:hover + i:after {
  content: '\f00c';
}

Снимки экрана до и после

Я ценю вашу помощь!


twitter-bootstrap-3 font-awesome-5 smartadmin
person BobC    schedule 02.08.2019    source источник
comment
Попробуйте изменить семейство шрифтов: Font Awesome 5 Pro;   -  person Nandita Sharma    schedule 02.08.2019

Ответы (1)


arrow_upward
0
arrow_downward

Используйте его, как показано ниже.

Добавьте класс «fa» в тег i и переместите CSS из тега i:after в тег i.

.smart-form .checkbox input+i {
  font-family: "Font Awesome 5 Pro";
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}

.smart-form .checkbox input+i:after {
  content: '\f00c';
}

.smart-form .checkbox input:checked:hover+i:after {
  content: '\f00d';
}

.smart-form .checkbox input:checked:disabled:hover+i:after {
  content: '\f00c';
}
<script src="https://kit.fontawesome.com/ff81d4d106.js"></script>
<section class="smart-form">
  <label class="checkbox">
<input type="checkbox" name="remember" checked (click)="doCheckbox()">
<i class="fa"></i>Stay signed in</label>
</section>

person Nandita Sharma    schedule 02.08.2019
comment
Спасибо, Нандита! Он работает идеально. Я изменил семейство шрифтов: "Font Awesome 5 Free"; и добавил font-size: 19px; для заполнения флажка. - person BobC; 02.08.2019