Glyphicons bootstrap 3: полезные иконки для вашего сайта
Glyphicons - это набор из более чем 250 векторных иконок, которые включены в популярный фреймворк Bootstrap 3 для веб-разработки. Эти иконки помогут сделать ваш сайт или веб-приложение более информативным и привлекательным для пользователей.
Обзор Glyphicons bootstrap 3
Иконки glyphicons предоставляют следующие преимущества:
- Улучшают визуальное восприятие сайта
- Делают интерфейс более интуитивным
- Помогают выделить важную информацию
- Являются векторными, пригодны для Retina дисплеев
- Имеют небольшой размер
Иконки glyphicons поддерживаются в последних версиях всех популярных браузеров, включая мобильные. В набор glyphicons входит более 250 разнообразных иконок, которые разбиты на 5 категорий:
- Символы. Включают математические, валютные, музыкальные и другие символы. Например, звездочка, плюс, минус, ноты.
- Формы. Содержат иконки простых фигур: треугольник, квадрат, круг.
- Объекты. Изображают предметы быта и техники: кровать, яблоко, ножницы, часы.
- Транспорт. Включают различные виды транспорта: самолет, автобус, велосипед.
- Человек. Изображают людей и части тела: голова, рука, нога. Иконки распространяются под лицензией MIT, то есть можно использовать в своих проектах совершенно бесплатно, но с указанием авторства.
Glyphicons bootstrap 3, как подключить
Самый простой способ подключить эти иконки к своему сайту - использовать готовые библиотеки стилей из сети доставки контента (CDN). Для этого достаточно подключить соответствующий CSS файл.
Если вы хотите использовать glyphicons локально, без CDN, тогда потребуется:
- Скачать Bootstrap 3
- Распаковать архив
- Скопировать шрифты в папку проекта
- Указать путь к шрифтам в CSS
- Подключить стили glyphicons
Чтобы проверить, что вы все правильно подключили, нужно отобразить любую иконку glyphicons на странице и убедиться, что она отображается корректно.
Теперь давайте перейдем к следующему важному вопросу: как правильно использовать эти иконки на сайте?
Использование glyphicons bootstrap 3
Чтобы отобразить нужную иконку на сайте, используется следующая HTML-разметка:
- Контейнерный тег (чаще всего
span) - Класс
.glyphicon- для стилей иконки - Класс с названием конкретной иконки, например
.glyphicon-search
Полный список доступных иконок с классами можно посмотреть в документации Bootstrap 3.
Изменение размера и цвета
По умолчанию размер иконок glyphicons составляет 14 пикселей. Чтобы изменить размер, используйте стандартные классы Bootstrap:
.glyphicon-lg- для увеличения.glyphicon-sm- для уменьшения
Для смены цвета иконок применяйте стили CSS, например:
.glyphicon { color: #e67e22; }
Добавление иконок в элементы
Иконки glyphicons можно размещать не только в тексте статей, но и других элементах интерфейса:
- Кнопки
- Меню навигации
- Формы
- Списки
- Заголовки
Анимация иконок
Чтобы заставить иконки glyphicons двигаться или изменяться при определенных действиях пользователя можно использовать CSS-анимацию:
@keyframes rotateIcon { 100% { transform: rotate(360deg); } } .glyphicon:hover { animation: rotateIcon 1s linear; }
А можно реализовать анимацию на JavaScript для большего разнообразия эффектов.
Решение распространенных проблем
Иногда после подключения glyphicons иконки не отображаются на сайте. Чаще всего это происходит по таким причинам:
- Неправильный путь к папке с шрифтами
- Шрифты не загрузились из-за ошибок
- Не хватает прав доступа к шрифтам
- Конфликт стилей с другими библиотеками
- Опечатки в названиях классов иконок
Чтобы исправить проблему, проверьте консоль браузера на наличие ошибок, связанных с шрифтами или стилями. Убедитесь, что путь к папке со шрифтами указан верно. Попробуйте подключить glyphicons на чистом шаблоне, без сторонних библиотек.
Использование иконок в меню навигации
Одно из лучших мест для размещения иконок glyphicons - это пункты меню сайта. Это поможет пользователю быстрее ориентироваться и находить нужные разделы.
Например, для меню можно использовать такие иконки:
- Главная - домик
- Каталог - список
- Корзина - корзина
- Профиль - пользователь
Подберите для своего проекта уникальное сочетание понятных иконок, которые будут соответствовать смыслу разделов сайта.