Bootstrap5 иконок font-weight

Я недавно обновился до bootstrap 5 прямо с 3. Да, я пропустил 4.

Дело в том, что в 3 я делал что-то подобное.

      <i class="glyphicon glyphicon-asterisk"></i>

<style> i:hover { font-weight: bold; } </style>

Теперь, с иконками bootstrap5, это не работает!

Очевидно, сейчас я использую новые значки.

      <i class="bi bi-asterisk"></i>

<style> i:hover { font-weight: bold; } </style>

Но, как я уже сказал, это не работает.

Почему? Есть ли способ добиться этого?

Источник

4 ответа

Я тестировал Bootstrap 5, и вес шрифта не работал с «значком Bootstrap 5 <i ></i>». Но использование «-webkit-text-stroke» будет выглядеть как результат «шрифта».

Пожалуйста, попробуйте это.

          <i class="bi bi-asterisk"></i>
    <style> i:hover { -webkit-text-stroke: 1px; } </style>

Он работает на Bootstrap 5.

Источник

не работает с иконочным шрифтом Bootstrap 5.

Как упоминается в документации Bootstrap Icon , стили очень ограничены.

Цвет стиля можно изменить, установив класс .text-* или пользовательский CSS.

Вы можете применить хак, используя нестандартный -webkit-text-stroke, который будет напоминать полужирный текст.

Предупреждение о жирном шрифте при наведении

Этот хак не ведет себя так же, как настоящий жирный шрифт, так как он не меняет размер символа. Потому чтоfont-weightизменяет поток текста, этого следует избегать при наведении, так как текст может смещаться или даже переноситься при наведении.

Предупреждения о доступности

См. также Рекомендации по доступности для значка Bootstrap.

Если вы хотите стилизовать наведение для элемента, это указывает на то, что у вас, вероятно, есть какое-то взаимодействие, связанное с ним. Интерактивные элементы должны соответствовать нескольким критериям, чтобы их могли использовать люди с ограниченными возможностями или любители клавиатуры:

  • Должно быть очевидно, что с ним можно взаимодействовать визуально.
  • Это также необходимо указать с помощью роли элемента, напримерbuttonилиlink, быть подверженным вспомогательным технологиям
  • Взаимодействие также должно работать с клавиатурой, чтобы быть сфокусированным
  • Чтобы узнать, что делает активация элемента, ему нужно доступное имя

В этом случае лучше всего обернуть значок в кнопку:

      <button type="button" class="btn btn-light" aria-label=""><i class="bi-asterisk"></i></button>
<style>
  .btn:hover { -webkit-text-stroke: 1px }
</style>
Источник

Это просто неправильно понятая концепция шрифта и того, как они работают.
Иконки сделаны из шрифта, поэтому здесь работает та же концепция.

Обычно, когда вы устанавливаете что-то жирным с помощью браузера, на самом деле это не просто делает шрифт немного больше. НЕТ, они заменят весь шрифт на аналогичный. В качестве примера: Ariaк Aria Bold. Высококачественный шрифт должен иметь по крайней мере 3 или лучше 6 версий (светлый, обычный, полужирный x курсив, не курсив).

Когда браузер не может найти шрифт для другого font-weightversion , он пытается угадать, как это должно выглядеть. То же самое с font-style.

Увидеть разницу в italicа также obliqueв документации в качестве примера:https://developer.mozilla.org/en-US/docs/Web/CSS/font-style

Итак, как ваша буква-значок должна выглядеть полужирной или светлой? Почему это работало на старой версии бутстрапа? Не знаю, правда. Возможно, какие-то внутренние настройки шрифта или деклерация css. Но одно можно сказать наверняка: вы не должны использовать это правило для иконок (которые их не поддерживают, FontAwesome поддерживает, кстати).

Один из подобных подходов заключается в использовании transform: scale(1.05)изменить размер элемента DOM. С использованием scale(2)увеличился бы в два раза.

Источник

Это сработало со мной при работе с реакцией

штрих: белый; ширина обводки: 3px;

Источник
Другие вопросы по тегам