Фреймворк Bootstrap пропонує майже п'ять сотень безкоштовних векторних іконок. Зберігаються ці іконки у вигляді векторного шрифту, який важить близько 200 Кб.
Як знайти
Ікончаті шрифти підключаються разом з самим фреймворком Bootstrap і знаходяться в папці fonts. Не лякайтеся великій кількості вмісту папки: файли *.ttf, *.woff і інші використовуються для коректного відображення в різних браузерах.
Ви можете використовувати тільки шрифт без використання самого фреймворку, для цього достатньо буде зайти на сторінку, де зазвичай завантажується Bootstrap, і прибрати чекбокси на всіх елементах, крім Glyphicons.
Іконки можна використовувати де завгодно: в тексті, для кнопок, в навігації, формах тощо. Ось кілька прикладів таких іконок:
Синтаксис Glyphicons
Додавати іконки можна за допомогою тегу </span> з двома певними класами:
<span class = "glyphicon glyphicon-name"> </span>
У цій конструкції name потрібно замінити на назву іконки. Повний список назв доступний на сторінці компонентів Bootstrap.
Іконки в кнопках
З приходом HTML5 ми маємо змогу налаштовувати кнопки на свій смак, в тому числі додавати до них зображення та іконки. Ось приклад того, як можна створити кнопку з іконкою Bootstrap:
<button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-headphones"></span> Навушники </button>
Badges (стікери)
Badges - це пояснення або будь-яка додаткова інформація про посилання, пункт меню або будь-який інший елемент сторінки. Це рядковий текстовий елемент, який можна додати за допомогою класу .badge та елементу span до потрібного елементу сторінки:
Повідомлення <span class="badge">42</span>
Наступний урок (Урок №9: Текстові панелі)
