Bootstrap fa иконки: fa-facebook: Иконки Font Awesome

Содержание

Работа с Bootstrap | WebReference

Иконки из набора Font Awesome прекрасно сочетаются с фреймворками вроде Bootstrap. Хотя этот фреймворк уже содержит необходимый набор иконок, его можно расширить за счёт сторонних комплектов. В примере 1 показано создание группы кнопок с иконками.

Пример 1. Кнопки с иконками

<div>
 <a href="#"><i></i></a>
 <a href="#"><i></i></a>
 <a href="#"><i></i></a>
</div>
<div>
 <a href="#"><i></i></a>
 <a href="#"><i></i></a>
 <a href="#"><i></i></a>
</div>

Результат данного примера показан на рис. 1.

Рис. 1. Вид кнопок с иконками

Иконки также можно применять в качестве ссылок. Для примера возьмём хлебные крошки, в которых первым пунктом будет идти иконка домика (пример 2). Поскольку элемент <i> находится внутри ссылки <a>, иконка будет служить ссылкой и менять свой цвет при наведении на неё курсора мыши.

Пример 2. Хлебные крошки

<ul>
  <li><a href="#"><i></i></a></li>
  <li><a href="#">Лес</a></li>
  <li><a href="#">Опушка</a></li> 
  <li>Пряничный домик</li>
</ul>

Результат данного примера показан на рис. 2.

Рис. 2. Хлебные крошки

При создании ниспадающего меню вставим иконку вместо текста и добавим по иконке перед каждым пунктом меню. Для списков Font Awesome использует специальный класс fa-ul для элемента <ul> и fa-li для элементов <li>. Дело в том, что ширина каждой иконки разная и левый край пунктов списка из-за этого окажется неровным. Указанные классы исправляют этот недостаток для обычного списка, но в нашем ниспадающем меню приводят к ошибкам. Поэтому добавляем свой стиль, который устанавливает положение иконок нужным нам образом (пример 3).

Пример 3. Ниспадающее меню

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ниспадающее меню</title>
  <link href="css/bootstrap. min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <style>
   .fa-ul {
    margin-left: 0; /* Отступ слева */
   }
   .fa-ul > li {
    text-indent: 1em; /* Сдвигаем текст вправо */
   }
   .fa-li {
    left: -0.5em; top: 0.4em; /* Положение иконки */
    color: #1fa67a; /* Цвет иконок */
   }
  </style>
 </head>
 <body>
  <div>
   <div>
    <button type="button" data-toggle="dropdown" aria-expanded="false">
     <i></i>
    </button>
    <ul role="menu" aria-labelledby="dropdownMenu">
     <li role="presentation"><a role="menuitem" href="#"><i></i> Автобусом</a></li>
     <li role="presentation"><a role="menuitem" href="#"><i></i> Такси</a></li>
     <li role="presentation"><a role="menuitem" href="#"><i></i> Пешком</a></li>
    </ul>
   </div>
  </div>
  <script src="js/jquery.  min.js"></script>
  <script src="js/bootstrap.min.js"></script>
 </body>
</html>

Результат данного примера показан на рис. 3.

Рис. 3. Ниспадающее меню

Автор: Влад Мержевич

Последнее изменение: 11.08.2018

иконки, иконочный шрифт — Tokar.ua

Фреймворк Bootstrap предлагает вам, кроме прочего и кроме шуток, почти три сотни бесплатных векторных иконок. Хранятся эти иконки в виде векторного шрифта, который весит около 300 Кб. Несмотря на то, что этот набор платный, автор разрешил его бесплатное использование и в благодарность просит размещать ссылку на его проект Glyphicons. Что я и делаю.

А теперь я расскажу, как и вам примкнуть к остальным и начать пользоваться иконками из бутстрапа.

Иконочный шрифт подключается вместе с самим фреймворком Bootstrap и находится в папке fonts. Не пугайтесь обилию содержимого папки: файлы ttf, woff и остальные используются для корректного отображения в разных браузерах.

Вы можете использовать только шрифт без использования самого фреймворка, для этого достаточно будет зайти на страницу, где обычно скачивают Bootstrap, и убрать чекбоксы на всех элементах, кроме Glyphicons.

Скачанный шрифт подключается при помощи css, который вы найдёте в папке bootstrap.

Чешские иконки для бутстрапа можно использовать где угодно: в тексте, для кнопок, в навигации, формах и так далее. Вот вам несколько примеров таких иконок:

Добавлять иконки можно при помощи строчного элемента с двумя определёнными классами. Обычно это <span> или <i>:

С приходом HTML5 мы можем настраивать кнопки как нам захочется, в том числе добавлять в них изображения и иконки. Вот пример того, как мы можем создать кнопку с иконкой из Bootstrap:

Не уверен, что badge стоит переводить именно как “стикер” или “значок”, если у вас есть другие варианты перевода, дайте мне знать.

Что это такое? Badges — это пояснение или любая дополнительная информация о ссылке, пункте меню или каком-либо другом элементе страницы. Это строчный текстовый элемент, который можно добавить при помощи класса .badge и элемента span к нужному элементу страницы.

Иконка	Классы
	`glyphicon glyphicon-asterisk`
	`glyphicon glyphicon-plus`
	`glyphicon glyphicon-euro`
	`glyphicon glyphicon-minus`
	`glyphicon glyphicon-cloud`
	`glyphicon glyphicon-envelope`
	`glyphicon glyphicon-pencil`
	`glyphicon glyphicon-glass`
	`glyphicon glyphicon-music`
	`glyphicon glyphicon-search`
	`glyphicon glyphicon-heart`
	`glyphicon glyphicon-star`
	`glyphicon glyphicon-star-empty`
	`glyphicon glyphicon-user`
	`glyphicon glyphicon-film`
	`glyphicon glyphicon-th-large`
	`glyphicon glyphicon-th`
	`glyphicon glyphicon-th-list`
	`glyphicon glyphicon-ok`
	`glyphicon glyphicon-remove`
	`glyphicon glyphicon-zoom-in`
	`glyphicon glyphicon-zoom-out`
	`glyphicon glyphicon-off`
	`glyphicon glyphicon-signal`
	`glyphicon glyphicon-cog`
	`glyphicon glyphicon-trash`
	`glyphicon glyphicon-home`
	`glyphicon glyphicon-file`
	`glyphicon glyphicon-time`
	`glyphicon glyphicon-road`
	`glyphicon glyphicon-download-alt`
	`glyphicon glyphicon-download`
	`glyphicon glyphicon-upload`
	`glyphicon glyphicon-inbox`
	`glyphicon glyphicon-play-circle`
	`glyphicon glyphicon-repeat`
	`glyphicon glyphicon-refresh`
	`glyphicon glyphicon-list-alt`
	`glyphicon glyphicon-lock`
	`glyphicon glyphicon-flag`
	`glyphicon glyphicon-headphones`
	`glyphicon glyphicon-volume-off`
	`glyphicon glyphicon-volume-down`
	`glyphicon glyphicon-volume-up`
	`glyphicon glyphicon-qrcode`
	`glyphicon glyphicon-barcode`
	`glyphicon glyphicon-tag`
	`glyphicon glyphicon-tags`
	`glyphicon glyphicon-book`
	`glyphicon glyphicon-bookmark`
	`glyphicon glyphicon-print`
	`glyphicon glyphicon-camera`
	`glyphicon glyphicon-font`
	`glyphicon glyphicon-bold`
	`glyphicon glyphicon-italic`
	`glyphicon glyphicon-text-height`
	`glyphicon glyphicon-text-width`
	`glyphicon glyphicon-align-left`
	`glyphicon glyphicon-align-center`
	`glyphicon glyphicon-align-right`
	`glyphicon glyphicon-align-justify`
	`glyphicon glyphicon-list`
	`glyphicon glyphicon-indent-left`
	`glyphicon glyphicon-indent-right`
	`glyphicon glyphicon-facetime-video`
	`glyphicon glyphicon-picture`
	`glyphicon glyphicon-map-marker`
	`glyphicon glyphicon-adjust`
	`glyphicon glyphicon-tint`
	`glyphicon glyphicon-edit`
	`glyphicon glyphicon-share`
	`glyphicon glyphicon-check`
	`glyphicon glyphicon-move`
	`glyphicon glyphicon-step-backward`
	`glyphicon glyphicon-fast-backward`
	`glyphicon glyphicon-backward`
	`glyphicon glyphicon-play`
	`glyphicon glyphicon-pause`
	`glyphicon glyphicon-stop`
	`glyphicon glyphicon-forward`
	`glyphicon glyphicon-fast-forward`
	`glyphicon glyphicon-step-forward`
	`glyphicon glyphicon-eject`
	`glyphicon glyphicon-chevron-left`
	`glyphicon glyphicon-chevron-right`
	`glyphicon glyphicon-plus-sign`
	`glyphicon glyphicon-minus-sign`
	`glyphicon glyphicon-remove-sign`
	`glyphicon glyphicon-ok-sign`
	`glyphicon glyphicon-question-sign`
	`glyphicon glyphicon-info-sign`
	`glyphicon glyphicon-screenshot`
	`glyphicon glyphicon-remove-circle`
	`glyphicon glyphicon-ok-circle`
	`glyphicon glyphicon-ban-circle`
	`glyphicon glyphicon-arrow-left`
	`glyphicon glyphicon-arrow-right`
	`glyphicon glyphicon-arrow-up`
	`glyphicon glyphicon-arrow-down`
	`glyphicon glyphicon-share-alt`
	`glyphicon glyphicon-resize-full`
	`glyphicon glyphicon-resize-small`
	`glyphicon glyphicon-exclamation-sign`
	`glyphicon glyphicon-gift`
	`glyphicon glyphicon-leaf`
	`glyphicon glyphicon-fire`
	`glyphicon glyphicon-eye-open`
	`glyphicon glyphicon-eye-close`
	`glyphicon glyphicon-warning-sign`
	`glyphicon glyphicon-plane`
	`glyphicon glyphicon-calendar`
	`glyphicon glyphicon-random`
	`glyphicon glyphicon-comment`
	`glyphicon glyphicon-magnet`
	`glyphicon glyphicon-chevron-up`
	`glyphicon glyphicon-chevron-down`
	`glyphicon glyphicon-retweet`
	`glyphicon glyphicon-shopping-cart`
	`glyphicon glyphicon-folder-close`
	`glyphicon glyphicon-folder-open`
	`glyphicon glyphicon-resize-vertical`
	`glyphicon glyphicon-resize-horizontal`
	`glyphicon glyphicon-hdd`
	`glyphicon glyphicon-bullhorn`
	`glyphicon glyphicon-bell`
	`glyphicon glyphicon-certificate`
	`glyphicon glyphicon-thumbs-up`
	`glyphicon glyphicon-thumbs-down`
	`glyphicon glyphicon-hand-right`
	`glyphicon glyphicon-hand-left`
	`glyphicon glyphicon-hand-up`
	`glyphicon glyphicon-hand-down`
	`glyphicon glyphicon-circle-arrow-right`
	`glyphicon glyphicon-circle-arrow-left`
	`glyphicon glyphicon-circle-arrow-up`
	`glyphicon glyphicon-circle-arrow-down`
	`glyphicon glyphicon-globe`
	`glyphicon glyphicon-wrench`
	`glyphicon glyphicon-tasks`
	`glyphicon glyphicon-filter`
	`glyphicon glyphicon-briefcase`
	`glyphicon glyphicon-fullscreen`
	`glyphicon glyphicon-dashboard`
	`glyphicon glyphicon-paperclip`
	`glyphicon glyphicon-heart-empty`
	`glyphicon glyphicon-link`
	`glyphicon glyphicon-phone`
	`glyphicon glyphicon-pushpin`
	`glyphicon glyphicon-usd`
	`glyphicon glyphicon-gbp`
	`glyphicon glyphicon-sort`
	`glyphicon glyphicon-sort-by-alphabet`
	`glyphicon glyphicon-sort-by-alphabet-alt`
	`glyphicon glyphicon-sort-by-order`
	`glyphicon glyphicon-sort-by-order-alt`
	`glyphicon glyphicon-sort-by-attributes`
	`glyphicon glyphicon-sort-by-attributes-alt`
	`glyphicon glyphicon-unchecked`
	`glyphicon glyphicon-expand`
	`glyphicon glyphicon-collapse-down`
	`glyphicon glyphicon-collapse-up`
	`glyphicon glyphicon-log-in`
	`glyphicon glyphicon-flash`
	`glyphicon glyphicon-log-out`
	`glyphicon glyphicon-new-window`
	`glyphicon glyphicon-record`
	`glyphicon glyphicon-save`
	`glyphicon glyphicon-open`
	`glyphicon glyphicon-saved`
	`glyphicon glyphicon-import`
	`glyphicon glyphicon-export`
	`glyphicon glyphicon-send`
	`glyphicon glyphicon-floppy-disk`
	`glyphicon glyphicon-floppy-saved`
	`glyphicon glyphicon-floppy-remove`
	`glyphicon glyphicon-floppy-save`
	`glyphicon glyphicon-floppy-open`
	`glyphicon glyphicon-credit-card`
	`glyphicon glyphicon-transfer`
	`glyphicon glyphicon-cutlery`
	`glyphicon glyphicon-header`
	`glyphicon glyphicon-compressed`
	`glyphicon glyphicon-earphone`
	`glyphicon glyphicon-phone-alt`
	`glyphicon glyphicon-tower`
	`glyphicon glyphicon-stats`
	`glyphicon glyphicon-sd-video`
	`glyphicon glyphicon-hd-video`
	`glyphicon glyphicon-subtitles`
	`glyphicon glyphicon-sound-stereo`
	`glyphicon glyphicon-sound-dolby`
	`glyphicon glyphicon-sound-5-1`
	`glyphicon glyphicon-sound-6-1`
	`glyphicon glyphicon-sound-7-1`
	`glyphicon glyphicon-copyright-mark`
	`glyphicon glyphicon-registration-mark`
	`glyphicon glyphicon-cloud-download`
	`glyphicon glyphicon-cloud-upload`
	`glyphicon glyphicon-tree-conifer`
	`glyphicon glyphicon-tree-deciduous`
	`glyphicon glyphicon-cd`
	`glyphicon glyphicon-save-file`
	`glyphicon glyphicon-open-file`
	`glyphicon glyphicon-level-up`
	`glyphicon glyphicon-copy`
	`glyphicon glyphicon-paste`
	`glyphicon glyphicon-alert`
	`glyphicon glyphicon-equalizer`
	`glyphicon glyphicon-king`
	`glyphicon glyphicon-queen`
	`glyphicon glyphicon-pawn`
	`glyphicon glyphicon-bishop`
	`glyphicon glyphicon-knight`
	`glyphicon glyphicon-baby-formula`
	`glyphicon glyphicon-tent`
	`glyphicon glyphicon-blackboard`
	`glyphicon glyphicon-bed`
	`glyphicon glyphicon-apple`
	`glyphicon glyphicon-erase`
	`glyphicon glyphicon-hourglass`
	`glyphicon glyphicon-lamp`
	`glyphicon glyphicon-duplicate`
	`glyphicon glyphicon-piggy-bank`
	`glyphicon glyphicon-scissors`
	`glyphicon glyphicon-bitcoin`
	`glyphicon glyphicon-btc`
	`glyphicon glyphicon-xbt`
	`glyphicon glyphicon-yen`
	`glyphicon glyphicon-jpy`
	`glyphicon glyphicon-ruble`
	`glyphicon glyphicon-rub`
	`glyphicon glyphicon-scale`
	`glyphicon glyphicon-ice-lolly`
	`glyphicon glyphicon-ice-lolly-tasted`
	`glyphicon glyphicon-education`
	`glyphicon glyphicon-option-horizontal`
	`glyphicon glyphicon-option-vertical`
	`glyphicon glyphicon-menu-hamburger`
	`glyphicon glyphicon-modal-window`
	`glyphicon glyphicon-oil`
	`glyphicon glyphicon-grain`
	`glyphicon glyphicon-sunglasses`
	`glyphicon glyphicon-text-size`
	`glyphicon glyphicon-text-color`
	`glyphicon glyphicon-text-background`
	`glyphicon glyphicon-object-align-top`
	`glyphicon glyphicon-object-align-bottom`
	`glyphicon glyphicon-object-align-horizontal`
	`glyphicon glyphicon-object-align-left`
	`glyphicon glyphicon-object-align-vertical`
	`glyphicon glyphicon-object-align-right`
	`glyphicon glyphicon-triangle-right`
	`glyphicon glyphicon-triangle-left`
	`glyphicon glyphicon-triangle-bottom`
	`glyphicon glyphicon-triangle-top`
	`glyphicon glyphicon-console`
	`glyphicon glyphicon-superscript`
	`glyphicon glyphicon-subscript`
	`glyphicon glyphicon-menu-left`
	`glyphicon glyphicon-menu-right`
	`glyphicon glyphicon-menu-down`
	`glyphicon glyphicon-menu-up`

иконок Font Awesome | Список значков Fa Fa, Получите все последние бесплатные значки Fontawesome

Font Awesome Icons | CDN | Настройка

Коллекция из тысяч оригинальных значков доступна под названием «Font Awesome Icons». Типы значков, такие как сплошные, обычные, светлые, тонкие, двухцветные и фирменные значки, присутствуют в самой последней версии Font Awesome. Разработчики также называют эти шрифты awesome icons FA icons или FA FA icons. 7 февраля 2022 года была выпущена самая последняя версия Font Awesome Icons 6. Получите URL-адрес библиотеки CDN Font Awesome Icons самых последних бесплатных версий (4, 5, 6). Самая последняя версия иконок Font Awesome 6 может использоваться с Vue.js, React.js, Ember, Angular, Python, Django, Sass, Less и Wordpess.

Что такое значки Font Awesome?

В коллекции Font Awesome Icons есть как бесплатные, так и платные значки. Эти значки FA можно использовать в веб-разработке, а также в проектах приложений для iOS и Android. Любая библиотека приложений может очень легко реализовать библиотеку Font Awesome 6 Icon.

Код иконки для Font Awesome имеет возможность преобразовывать текст в иконки с помощью магических лигатур. Иконки Фа Фа легко адаптируются и могут быть изменены в соответствии с нашими потребностями. Добавьте значки Font Awesome версий 4, 5 и 6, чтобы создать фантастический пользовательский интерфейс (UI) для веб-приложений или веб-сайта. Пользователи могут быстро узнать о действенных идеях с помощью значков шрифтов и элементов списка. Одним из лучших способов создания интерактивного интерфейса является стратегическое использование значков цвета, типографики и шрифта. Значки Font Awesome (FA) побуждают пользователей быстрее выполнять задачи. После добавления соответствующих элементов пользовательского интерфейса макет страницы также становится намного лучше.

Как получить последние бесплатные значки Font Awesome?

7 февраля 2022 года FontAwesome.com официально выпустил набор иконок Font Awesome 6. Вам нужно всего несколько строк кода, чтобы включить значки FA в свои проекты веб-разработки. Получите полный список самых последних и значимых бесплатных иконок Font Awesome 6 из списка выше. Значки Font Awesome 6 легко редактировать, и вы можете быстро скопировать код HTML и CSS.

Что делает иконки Font Awesome такими популярными?

Разнообразие бесплатных и платных наборов иконок, предлагаемых Font Awesome icons, больше, чем у конкурентов. Код и значки для Font Awesome довольно просты в использовании. После использования класса значков Font Awesome значки изменяются по мере необходимости. Ориентация, размер или цвет могут быть изменены без дополнительной работы. Значки и функции анимации Font Awesome часто обновляются. Все это усиливает удивительность, самобытность и привлекательность шрифта.

5 основных функций Font Awesome Icons

Вот список из пяти основных преимуществ значков Font Awesome, которые вы можете легко получить.

1. Легко вызывает чувство влечения.
2. Чрезвычайно привлекательный.
3. Положительно влияет на зрение и мозг.
4. Замена длины текста
5. Повышает полезность продукта и продаж.

Font Awesome CDN: Версии 6, 5, 4 Иконки

Вы можете включить библиотеку Font Awesome Icons CDN Url, просто используя приведенные ниже ссылки.

Fa 6.0 CDN — ссылка CDN
Fa 5.15 CDN — ссылка CDN
Fa 4.7.0 CDN — ссылка CDN

Font Awesome Icon Animations List

Beat: fa-beat
Fade: fa-fade
Beat-Fade: fa-beat-fa де
Отскок: fa-bounce
Переворот: fa-flip
Встряхивание: fa-shake
Вращение: fa-spin

После применения кодов утилит, несколько анимаций доступны с иконками шрифта awesome. Самые популярные анимации:

Что такое Fa Fa Icons

Fa Fa Иконки используются для веб-разработки. Приложение IOS/Android использует соответствующие значки Фа Фа. Fontawesome Icon — очень легко реализуемая библиотека веб-приложений. Код значков Font Awesome имеет силу магических лигатур, которые превращают этот текст в значок. Эти значки Фа Фа очень настраиваемые, которые можно изменить в соответствии с нашими потребностями. Выше перечислены более 2000 уникальных значков Фа Фа. Эти значки создадут отличный пользовательский интерфейс (UI), когда пользователи взаимодействуют с веб-приложениями или веб-сайтом. Компоненты списка значков шрифтов помогают пользователям легко узнать о действенных идеях. Стратегическое использование цвета, типографики и значков Fa — некоторые из лучших практик для разработки интерактивного интерфейса. Значки Font Awesome (Fa-Fa) облегчают работу пользователей и делают их быстрее. Макет страницы также значительно улучшается после добавления правильных элементов пользовательского интерфейса.

Давайте сначала разберемся, что такое значки. Значки в основном используются в качестве символов на веб-сайте/приложении. Просто подумайте, путешествуя по дороге, мы видим символы, которые предоставляют нам важную информацию, например, есть разворот, левый поворот или правый поворот. Так что все эти символы помогают нам в путешествии. Точно так же очень важно получать ключевую информацию через символы. Основным тестом значка является значок поиска на кнопке поиска Google, который дает пользователю подсказку о назначении кнопки. В реальной жизни никто не хочет читать длинный текст или тратить время на поиск навигационных ссылок или другой важной информации, поэтому значки играют здесь ключевую роль. Несколько лет назад люди использовали изображения для отображения иконок, но теперь все изменилось. Давайте рассмотрим еще один пример, чтобы понять использование изображений в качестве значков. Предположим, нам нужно добавить 20-30 значков на наш веб-сайт, в этом случае нам нужно 30 изображений для отображения значков. Таким образом, создание 20-30 изображений также потребует ресурсов и времени. Чтобы решить эту проблему, появилась концепция Fontawesomeicons. По сути, fontawesomeicons — это библиотека, которая содержит список всех возможных иконок.

Как пользоваться иконками Фа Фа?

Чтобы использовать fontawesomeicons, вам просто нужно включить библиотеку fontawesomeicons, а затем использовать классы CSS. Вы можете добавить любые значки за считанные секунды, используя эту библиотеку. Вместо того, чтобы тратить свое время, вы можете очень легко принять эту библиотеку, она проста и легко интегрируется. Если у вас есть базовые представления о HTML, CSS, вы можете легко их использовать. Эта библиотека также предоставляет вам некоторые основные настройки, такие как изменение размера значка, цвета значка и т. Д. Здесь, на этой странице, мы показали значки, которые обычно используются почти во всех приложениях. Вы можете напрямую скопировать HTML-код вместе с css и использовать значок. Убедитесь, что вы включили библиотеку значков fontawesome. Есть несколько других библиотек, доступных для иконок, но библиотека иконок Font Awesome является наиболее популярной и широко используемой разработчиками/дизайнерами.

URL CDN значков Fontawesome | Ссылка

Вы можете включить библиотеку иконок Fontawesome, просто используя приведенную ниже ссылку cdn url.

Font Awesome Icons Example

После подключения библиотеки вы сможете использовать шрифтовые иконки. Вот пример использования значка с использованием библиотеки fontawesome —

Для посещения последних государственных должностей — Экзамен Саркари

Иконки — dbc docs

Добавьте значки, чтобы улучшить ваше приложение.

Как и в случае с таблицами стилей CSS, dash-bootstrap-components не поставляется в комплекте со значками. Это дает вам свободу использовать любую библиотеку иконок по вашему выбору.

Доступен ряд различных библиотек значков, к которым можно подключиться через CDN или обслуживать локально в зависимости от ваших потребностей. Подробности о том, как связать css, можно найти в документации к темам.

Пакетные ссылки CDN

dash-bootstrap-components содержит ссылки CDN для Bootstrap Icons v1.8.1 и Font Awesome v6.1.1, двух библиотек значков, которые вы можете использовать в своих приложениях. Вы можете использовать любой из них, добавив их в external_stylesheets при создании экземпляра вашего приложения.

Bootstrap Icons были разработаны командой Bootstrap специально для использования с Bootstrap. На сайте Bootstrap есть отличная документация по их использованию и небольшой пример ниже.

Font Awesome — это, пожалуй, наиболее широко используемая библиотека иконок, которая очень часто используется с Bootstrap. Использование похоже на значки Bootstrap, более подробную информацию можно найти в их документации.

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

Ссылки доступны в подмодуле dash_bootstrap_components.icons .

 импортный дефис
импортировать dash_bootstrap_components как dbc
# Для иконок Bootstrap...
приложение = тире.Тире(
    external_stylesheets=[dbc. themes.BOOTSTRAP, dbc.icons.BOOTSTRAP]
)
# Или для значков Font Awesome...
приложение = тире.Тире(
    external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.FONT_AWESOME]
)

Ссылки доступны в списке dbcIcons , который добавляется в ваше пространство имен при импорте dashBootstrapComponents .

 библиотека (тире)
библиотека (dashBootstrapComponents)
# Для иконок Bootstrap...
приложение <- Dash$новый(
    external_stylesheets = список (dbcThemes $ BOOTSTRAP, dbcIcons $ BOOTSTRAP)
)
# Или для значков Font Awesome...
приложение <- Dash$новый(
    external_stylesheets = список (dbcThemes $ BOOTSTRAP, dbcIcons $ FONT_AWESOME)
)

Ссылки доступны как часть именованного кортежа dbc_icons , доступного в DashBootstrapComponents .

 с использованием Dash, DashBootstrapComponents
# Для иконок Bootstrap...
приложение = тире (
    external_stylesheets=[dbc_themes.BOOTSTRAP, dbc_icons.BOOTSTRAP]
)
# Или для значков Font Awesome. ..
приложение = тире (
    external_stylesheets=[dbc_themes.BOOTSTRAP, dbc_icons.FONT_AWESOME]
)

Пример

В этом простом примере к некоторым оповещениям добавляются значки Bootstrap.

Пример информационного оповещения со значком

Пример уведомления об успешном завершении со значком

Пример предупреждения со значком

Пример предупреждения об опасности со значком

питон
р
Юлия

 импортировать dash_bootstrap_components как dbc
импортировать dash_html_components как html
оповещения = html.Div(
 [
 dbc.Alert(
 [
 html.I(className="bi bi-info-circle-fill me-2"),
 "Пример информационного оповещения со значком",
 ],
 цвет = "информация",
 className="d-flex align-items-center",
 ),
 dbc.Alert(
 [
 html.