Использование glyphicons в Bootstrap 3.0: обновление с 2.3
Быстрый ответ
Чтобы быстро применить глификоны в Bootstrap 3.0, достаточно указать класс glyphicon
вместе с классом соответствующей иконки. Вот пример с иконкой поиска:
<span class="glyphicon glyphicon-search"></span>
Не забудьте подключить CSS Bootstrap в HTML, иначе иконки не будут видны.
Не только "Быстрый ответ"
От "icon-" к "glyphicon"
Прошли те времена, когда мы добавляли префикс "icon-". После появления Bootstrap 3.0 мы стали использовать теги <i>
или <span>
с классом glyphicon
. Вот как это сделать:
<!-- Раньше мы делали так -->
<i class="icon-search"></i>
<!-- Теперь нужно сделать так -->
<span class="glyphicon glyphicon-search"></span>
Хотя и <i>
, и <span>
работают, <span>
лучше подходит для создания доступных сайтов для скрин-ридеров.
Правильное размещение файлов
Чтобы не потерять глификоны, проверьте, что папка "fonts" находится рядом с "css" и "js":
@icon-font-path: "/fonts/"; // CSS и шрифты здесь!
Важно правильно разместить файлы.
Облегчаем миграцию
Миграция к Bootstrap 3.0 может быть сложной, но есть инструменты, помогающие облегчить переход со старого кода. Руководство по миграции на Bootstrap 3 поможет вам в этом процессе.
Работаем с иконками и кнопками
Иконкам и кнопкам требуется некоторое "дышащее" пространство, примерно 5 пикселей:
button span.glyphicon {
margin-right: 5px; // Теперь пространства больше, чем внутри капсулы SpaceX
}
Визуализация
Вообразите глификоны как наполненный ящик инструментов Bootstrap 3.0:
🧰 Ящик инструментов Bootstrap 3.0:
| Инструмент | Символ | Пример использования |
| ------------- | ------ | --------------------- |
| Glyphicon | 🔨 | Для выделения текста |
| Glyphicon | 🔧 | Обозначения действий |
| Glyphicon | 🚀 | Украшение кнопок |
Используйте глификоны для улучшения дизайна сайта. Например, добавьте иконку на кнопку:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> Поиск
</button>
Теперь значок увеличительного стекла 🔍 эстетически интегрирован в кнопку, придавая ей элегантность.
Глубже копаем
Применяем глификоны
Глификоны используются в:
- Навигационных меню: они служат дискретными маркерами.
- Формах: они помогают ориентироваться при вводе информации.
- Уведомлениях: для привлечения внимания к важным сообщениям.
Что следует избегать
- Изобилие иконок: излишнее количество отвлекает.
- Неуместные иконки: выбирайте иконки, которые бы гармонировали с общим дизайном.
Оптимизируем использование глификонов
- Настроим цвет и размер: глификоны легко стилизовать при помощи CSS.
- Анимация вращения: вращающаяся иконка может аккуратно привлечь внимание пользователя.
Когда глификонов недостаточно
- SVG-иконки: для более качественного масштабирования.
- Font Awesome: приемлемая альтернатива, легко интегрируется с Bootstrap 3.
Полезные материалы
- Компоненты · Bootstrap — подробная информация о глификонах от разработчиков Bootstrap.
- Компоненты глификонов Bootstrap — детальное руководство по глификонам на W3Schools.
- HTML Unicode Dingbats — Unicode dingbats, отличная замена, когда глификоны не подходят.
- Проблема типографики в Bootstrap — обсуждение типографики в Bootstrap, включая глификоны.
- Использование SVG | CSS-Tricks — детальное руководство об использовании SVG вместо векторных иконок.