Иконочный шрифт — это векторные иконки, позволяющие украсить сайт, подобно множеству картинок. При этом вес всех иконок составляет примерно 300 Кб, что значительно меньше, чем использование множества отдельных изображений. Это решение предпочтительнее, так как избавляет от необходимости вставлять большое количество отдельных картинок на сайт.
Иконочный шрифт Glyphicons
Используемый иконочный шрифт — Glyphicons. На основном сайте Glyphicons.com (glificons.com — некорректная ссылка, возможно, имеется в виду Glyphicons Free) представлена платная версия, но мы будем работать с бесплатной. В бесплатной версии доступно множество иконок, которые можно использовать на своих сайтах. Для поиска нужной иконки можно воспользоваться поиском на сайте (Search icon).
Подключение и использование Glyphicons
Если Bootstrap устанавливался через CDN (использовались CSS и JS файлы), Glyphicons уже должен быть установлен. Если же Bootstrap скачивался и устанавливался локально, необходимо дополнительно скачать Glyphicons. Для этого можно воспользоваться сайтом getbootstrap.com/customize. Там можно выбрать необходимые компоненты, избегая лишних, чтобы не перегружать сайт ненужным кодом. После выбора компонентов, необходимо нажать «Compile and download», чтобы скачать необходимые файлы. Иконки встраиваются с помощью класса glyphicon. Пример:
<i class="glyphicon glyphicon-remove"></i>Здесь glyphicon-remove — это название иконки (в данном случае, иконка «крестик»). Иконки — это шрифты, поэтому их можно изменять: цвет, размер и т.д. Например:
<i class="glyphicon glyphicon-remove" style="color:red; font-size:70px;"></i>В отличие от растровых изображений, увеличение иконок не приводит к потере качества. Пример использования в кнопке:
<button class="btn btn-success">
<i class="glyphicon glyphicon-remove"></i> Все хорошо
</button>Для поиска названий иконок можно использовать сайты с коллекциями Glyphicons. Класс иконки можно скопировать с сайта и вставить в свой код. Например, чтобы заменить иконку на галочку, можно использовать класс glyphicon-ok:
<i class="glyphicon glyphicon-ok"></i>Стили можно добавлять как в теге <i>, так и в теге <span>.
Значки (badges)
Значки или badges реализуются в теге <span>:
<span class="badge">57</span>Это может быть полезно для отображения количества уведомлений или других данных.
Работа с изображениями в Bootstrap
В Bootstrap легко сделать изображения адаптивными. Для этого используется класс img-responsive:
<img src="путь/к/изображению.jpg" class="img-responsive">Картинка будет автоматически подстраиваться под ширину экрана, никогда не выходя за его пределы. Дополнительные классы для изображений:
- img-circle — создает круглое изображение.
- img-rounded — создает изображение со скругленными углами.
- img-thumbnail — создает миниатюрное изображение с отступами, фоном и скругленными углами.
В этом уроке мы рассмотрели использование иконочного шрифта и работу с изображениями в Bootstrap. Изученные методы позволят создавать адаптивные и привлекательные веб-страницы.