Как использовать в Bootstrap иконки?

От автора: я приветствую вас. Одним из компонентов фреймворка бутстрап является иконочный шрифт. Сегодня заключительная статья из цикла статей по Bootstrap и мы рассмотрим, как работают в Bootstrap иконки.

Собственно, использовать иконки очень просто. Чтобы посмотреть их названия и инструкцию по вставке на страницу, вы можете использовать ту же самую документацию. Перейдите в раздел Компоненты и там первым делом будет раздел именно про иконочный шрифт. Документация

Собственно, вам нужно знать только название нужного глифа или иконки, потому что вставка на страницу происходит очень просто:

Все иконки и их названия перечислены в документации:

А мы с вами давайте лучше порассуждаем на тему того, что можно делать с этими значками и в чем их преимущества перед изображениями. Для начала я просто вставлю иконку.

У меня там с прошлой статьи остался код, вот он:

Внутрь абзаца, который с помощью класса h1 мы превращаем в заголовок первого уровня (только внешне), вставляем иконку. Хочу вас предупредить, чтобы в таком случае вы всегда ставили пробел перед текстом, чтобы глиф и текст имели между собой хотя бы небольшой отступ.

Глиф получает такой же цвет и размер, что и текст в ее блоке. Достаточно лишь изменить стили для класса h1:

В общем, это иконочный шрифт, поэтому значки можно делать любых размеров и любого цвета. Что еще можно с ней сделать?

Например, ее можно сделать ссылкой, обернув тегом a. Ей можно задать оформление, отличное от стоящего рядом текста.

Результат:

Можно сделать так, чтобы при наведении на иконку ее оформление менялось, изменить ее положение, цвета, размеры и т.д.

Как сделать анимированные иконки для Bootstrap?

Ну это уже ваша забота. Можно сделать так: прописать нужные вам анимационные эффекты и классы, которые будут отвечать за активацию этих эффектов, после чего применять их к нужным иконкам когда это необходимо. То есть сделать своего рода свой анимационный мини-фреймворк.

Приведу пример, чтобы вы могли понять, как вам действовать. Вставляем иконку:

Увеличим ее в размерах с помощью стилей:

Создаем анимационные эффекты. Пусть наш телефон поворачивает туда-сюда, так часто делают на лендингах, чтобы показать клиенту, что он может заказать обратный звонок:

Создаем класс, который будет активировать бесконечное кол-во повторов анимации:

Все остается только прописать этот класс иконке и она начнет поворачиваться. Этот же класс можно уже прописывать любой другой иконке и с ней произойдет то же самое. Вы можете поворачивать иконки на 180, 360 (да и вообще на любое кол-во градусов), увеличивать, уменьшать, добавлять тени и т.д. Ну вообще делать все, что только можно в css.

Что ж, немного практических примеров мы разобрали, ну а я еще обещал вам рассказать о паре преимуществ, которые есть у таких иконок перед реальными изображениями. Во-первых, иконочный шрифт в любом случае будет подгружаться на страницу быстрее, тем десятки и сотни пусть даже маленьких картинок, даже если оптимизировать их и соединить в спрайт.

Во-вторых, при увеличении размеров такие иконки не будут ухудшаться в качестве. Вы вообще можете забыть о любых проблемах, связанных с качеством, потому что это векторные иконки. Ну и в-третьих, не нужно будет заморачиваться с выравниванием изображений.

Мы рассмотрели только вставку значков в заголовок, на деле их можно добавлять куда угодно: в списки, в менюшки, кнопки и т.д. Например, вот такое меню можно сделать без проблем:

Собственно, встроенным шрифтом фреймворка не стоит ограничиваться, его может не хватить на все случаи жизни, поэтому иногда вам потребуется подключать и другие наборы глифов, более богатые.

Получить реальную практику верстки на Bootstrap, в том числе и практику вставки глифов в шаблоны сайтов, вы можете в нашем курсе, посвященном адаптивной верстке на Bootstrap. Что ж, на этом я заканчиваю данный цикл статей и искренне надеюсь, что Bootstrap стал для вас понятнее.

Комментарии Вконтакте:

Комментарии (1)