Иконки Bootstrap — примеры и руководство
ИконкиОсновное использование
Вы можете размещать значки где угодно, используя префикс CSS. fa и имя значка. Иконки предназначены для использования со встроенными элементами (нам нравится
тег для краткости, но использование больше
семантически правильно).
Показать код Изменить в песочнице
<я>
Чтобы увеличить размеры значков относительно их контейнера, используйте fa-xs , fa-sm , fa-lg ( 33% увеличение), или используйте литеральные размеры (для масштабирования от 1x до 10x ) fa-2x , 0-30 fa фа-4х , фа-5х , фа-7х , фа-8х , фа-9х , фа-10х .
Показать код Изменить в песочнице
<я>
<я>
<я>
<я>
<я>
<я>
<я>
<я>
<я>
<я>
<я>
<я>
Вы можете сделать все значки одинаковой ширины, чтобы их можно было легко выровнять по вертикали, например, в списке или меню навигации.
Добавьте класс fa-fw к элементу HTML, ссылающемуся на ваш значок, чтобы установить один или несколько значков одинаковой фиксированной ширины. Это удобно использовать, когда различная ширина значка (например, высокий, но тонкий значок поверх широкого, но короткого значка) нарушает вертикальное выравнивание. Для ясности в следующем примере мы добавили цвет фона на значок, чтобы вы могли видеть фиксированную ширину, а также увеличили размер шрифта родительского элемента.
Катание на коньках
Лыжи
Беговые лыжи
Сноубординг
Снегоочиститель
Показать код Изменить в песочнице
<дел>
Катание на коньках
Катание на лыжах
Лыжный спорт
Сноубординг
Снегоочиститель
Значки поиска для…
Solid
Regular
Brands
Latest
Search category
Accessibility
Animals
Arrows
Audio-Video
Automotive
Autumn
Здания
Бизнес
Charity
Chat
Chess
Code
Communication
Computers
Currency
Date-Time
Delivery
Design
Editors
Education
Emoji
Files
Food
Genders
Хэллоуин
Руки
Здоровье
Праздник
Изображения
Интерфейсы
Логистика
Карты
Marketing
Mathematics
Medical
Moving
Objects
Payments-Shopping
Political
Programming
Religion
Shapes
Spinners
Software
Sports
Status
Tabletop-gaming
Путешествия
Пользователи-Люди
Транспортные средства
Погода
Зима
Письмо
Как использовать значки в Bootstrap 5
Рекламные объявления
В этом руководстве вы узнаете, как включать и использовать значки Bootstrap на веб-странице.
Использование значков в Bootstrap 5
Bootstrap теперь включает более 1300 высококачественных значков, которые доступны в формате SVG, спрайтов SVG или веб-шрифтов. Вы можете использовать их с Bootstrap или без него в любом проекте.
Преимущество использования значков шрифтов заключается в том, что вы можете создавать значки любого цвета, просто применяя свойство CSS color . Кроме того, чтобы изменить размер значков, вы можете просто использовать CSS размер шрифта свойство.
Теперь давайте посмотрим, как включить и использовать значки Bootstrap на веб-странице.
Включение значков Bootstrap в веб-страницу
Самый простой способ включить значки Bootstrap в веб-страницу — использовать ссылку CDN. Эта ссылка CDN в основном указывает на удаленный файл CSS, который включает в себя все необходимые классы для создания значков шрифтов.
Вы можете включить значки Bootstrap в шаблон Bootstrap, а также в простую веб-страницу без использования платформы Bootstrap.
Рассмотрим следующий пример:
Пример
Попробуйте этот код »
<голова>
<мета-кодировка="utf-8">
Включение значков Bootstrap в HTML
<тело>
Привет, мир!
Как использовать значки Bootstrap в вашем коде
Чтобы использовать значки Bootstrap в своем коде, вам потребуется тег с нанесенным на него отдельным классом значков .bi-* .
Общий синтаксис для использования значков Bootstrap:
Где имя-класса — это имя конкретного класса значков, например. поиск , человек , календарь , звезда , глобус , facebook , twitter и так далее. См. список всех классов иконок Bootstrap.
Например, чтобы поместить значок поиска внутри кнопки, вы можете сделать что-то вроде этого:
Пример
Попробуйте этот код »— вывод приведенного выше примера будет выглядеть примерно так:
Точно так же вы можете размещать значки внутри навигации, форм, таблиц, абзацев или где угодно. В следующей главе вы увидите, как использовать эти значки в компонентах навигации Bootstrap.
Примечание: Не забудьте оставить пробел после закрывающего тега элемента значка (т.
е. после тега ) при использовании значков вместе со строками текста, такими как внутренние кнопки или навигационные ссылки, для обеспечения что между значком и текстом есть правильный интервал.
Использование значков Font Awesome в Bootstrap
Вы также можете использовать внешние библиотеки значков в Bootstrap. Font Awesome — одна из самых популярных и совместимых внешних библиотек иконок для Bootstrap. Он предоставляет более 675 значков, которые доступны в форматах SVG, PNG, а также в формате веб-шрифта для большего удобства использования и масштабируемости.
Вы можете просто использовать бесплатную ссылку CDN font-awesome, чтобы включить его в свой проект. Давайте посмотрим на следующий пример, чтобы понять, как это в основном работает:
Пример
Попробуйте этот код »
<голова>
<мета-кодировка="utf-8">
Включение значков Font Awesome в Bootstrap
jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<тело>
Привет, мир!
Как использовать значки Font Awesome в коде
Чтобы использовать значки Font Awesome в коде, вам потребуется тег , а также базовый класс .fa и отдельный класс значков .fa- * . Общий синтаксис для использования значков с потрясающим шрифтом:
Где имя-класса — это имя конкретного класса значков, например. поиск , пользователь , календарь , звезда , глобус , фейсбук , твиттер и так далее.