Использование 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> лучше подходит для создания доступных сайтов для скрин-ридеров. [SecondParagraphVideo]

Правильное размещение файлов

Чтобы не потерять глификоны, проверьте, что папка "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.

Полезные материалы

1. Компоненты · Bootstrap — подробная информация о глификонах от разработчиков Bootstrap.
2. Компоненты глификонов Bootstrap — детальное руководство по глификонам на W3Schools.
3. HTML Unicode Dingbats — Unicode dingbats, отличная замена, когда глификоны не подходят.
4. Проблема типографики в Bootstrap — обсуждение типографики в Bootstrap, включая глификоны.
5. Использование SVG | CSS-Tricks — детальное руководство об использовании SVG вместо векторных иконок.