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

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

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

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

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

<span class="glyphicon glyphicon-имя-иконки"></span>

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

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

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

<p class = "h1 bg-custom"><span class = "glyphicon glyphicon-comment"></span> Заголовок</p>

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

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

color: #EBEDC9;
font-size: 12px;

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

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

.h1 span{
	color: brown;
	font-size: 32px;
	-webkit-filter:drop-shadow(2px 2px 0 yellow);
}

Результат:

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

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

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

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

<span class = "glyphicon glyphicon-earphone"></span>

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

.glyphicon-earphone{
	font-size: 60px;
	color: green;
}

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

@keyframes tel{
	50%{transform:rotate(45deg)}
	100%{transform:rotate(-45deg)}
}

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

.tel-anim{
	animation-name: tel;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

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

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

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

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

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

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

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree