Фреймворк 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: Текстові панелі)

Перелік усіх уроків


 Похожие публикации
2016-05-31 • Просмотров [ 37 ]