Есть ли шрифт для новых значков Bootstrap?

Исходя из Font Awesome, я хотел бы использовать новые значки Bootstrap в своем веб-проекте. К сожалению, включение значков Bootstrap кажется более утомительным с точки зрения количества кода, который мне нужно вставить.

Что я ищу:

Возьмем, к примеру, значок bi-chevron-right. Есть ли способ использовать значки Bootstrap в качестве шрифта? Псевдокод:

<i class="bi bi-chevron-right"></i>

У этого способа было бы несколько преимуществ:

  • Простое и понятное включение значка.
  • Лучшее время загрузки, поскольку для всех значков проекта включен только 1 внешний файл.
  • Намного больше гибкости, где разместить фактическую библиотеку значков (рассмотрите вариант b), если вы измените путь к библиотеке, вам придется обновить все ссылки!).
  • Никакого жесткого кодирования фактического размера значка, так как это можно контролировать с помощью простого CSS.

Что в настоящее время предлагают только документы:

В настоящее время в документации предлагается несколько способов вставки значков. Все они содержат небольшой код для написания.

а) напрямую вставьте SVG:

<svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z"/></svg>

б) или используйте спрайт SVG:

<svg class="bi" width="32" height="32" fill="currentColor">
    <use xlink:href="/path/to/bootstrap-icons.svg#chevron-right"/>
</svg>

в) или ссылку на внешнее изображение:

<img src="/path/to/bootstrap-icons/chevron-right.svg" alt="" width="32" height="32" title="Bootstrap">

(Не говоря уже о варианте CSS, который в основном идентичен варианту а), просто более утомительный.)

Или я что-то упускаю?

Источник

3 ответа

Что тоже работает:

      npm install bootstrap@next

npm install bootstrap-icons

затем в вашем main.css

      @import url('../../../node_modules/bootstrap-icons/font/bootstrap-icons.css');

а затем в HTML

      <i class="bi bi-alarm"></i>
Источник

В версии 1.2 теперь включены файлы .woff, и вы можете использовать их, набрав "<i class = 'bi-alarm'> </i>" вроде потрясающий шрифт.

      <link rel="stylesheet" href="node_modules/bootstrap-icons/font/bootstrap-icons.css">

Источник: https://blog.getbootstrap.com/2020/12/11/bootstrap-icons-1-2-0/

Источник

Посмотрите документацию ниже

Используйте эту ссылку в HTML

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
Источник
Другие вопросы по тегам