Фреймворк Bootstrap предлагает вам, кроме прочего и кроме шуток, почти три сотни бесплатных векторных иконок. Хранятся эти иконки в виде векторного шрифта, который весит около 300 Кб. Несмотря на то, что этот набор платный, автор разрешил его бесплатное использование и в благодарность просит размещать ссылку на его проект Glyphicons. Что я и делаю.

В общем, спасибо Яну Коваржику из чешского маленького города Оломоуц, сегодня его клёвыми иконами пользуются миллионы фронтендеров по всему миру :).

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

Как найти

Иконочный шрифт подключается вместе с самим фреймворком Bootstrap и находится в папке fonts. Не пугайтесь обилию содержимого папки: файлы ttf, woff и остальные используются для корректного отображения в разных браузерах.

bootstrap шрифты

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

Как подключить

Скачанный шрифт подключается при помощи css, который вы найдёте в папке bootstrap.

Подробнее о подключении Bootstrap читайте во втором уроке.

Как и где пользоваться

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

  • комментарии
  • уведомления
  • метки записей
  • облачное хранилище
  • версия для печати

Синтаксис Glyphicons

Добавлять иконки можно при помощи строчного элемента с двумя определёнными классами. Обычно это <span> или <i>:

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

В этой конструкции name нужно заменить на название иконки.

Полный список названий доступен на странице компонентов Bootstrap.

Иконки в кнопках

С приходом HTML5 мы можем настраивать кнопки как нам захочется, в том числе добавлять в них изображения и иконки. Вот пример того, как мы можем создать кнопку с иконкой из Bootstrap:

<button class="btn btn-success">
<i class="glyphicon glyphicon-eye-close"></i> Скрыть плохие новости
</button>

И вот результат:

А узнать всё о кнопках вы можете из урока №4 о кнопках в бутстрапе.

Badges (стикеры или значки)

Не уверен, что badge стоит переводить именно как “стикер” или “значок”, если у вас есть другие варианты перевода, дайте мне знать.

Что это такое? Badges — это пояснение или любая дополнительная информация о ссылке, пункте меню или каком-либо другом элементе страницы. Это строчный текстовый элемент, который можно добавить при помощи класса .badge и элемента span к нужному элементу страницы.

<a href="#">Входящие <span class="badge">42</span></a>

И вот как это будет выглядеть в результате:

Полная справка по иконкам в Bootstrap

Вот вам список из 262 иконок с классами:

Иконка Классы
  glyphicon glyphicon-asterisk
  glyphicon glyphicon-plus
  glyphicon glyphicon-euro
  glyphicon glyphicon-minus
  glyphicon glyphicon-cloud
  glyphicon glyphicon-envelope
  glyphicon glyphicon-pencil
  glyphicon glyphicon-glass
  glyphicon glyphicon-music
  glyphicon glyphicon-search
  glyphicon glyphicon-heart
  glyphicon glyphicon-star
  glyphicon glyphicon-star-empty
  glyphicon glyphicon-user
  glyphicon glyphicon-film
  glyphicon glyphicon-th-large
  glyphicon glyphicon-th
  glyphicon glyphicon-th-list
  glyphicon glyphicon-ok
  glyphicon glyphicon-remove
  glyphicon glyphicon-zoom-in
  glyphicon glyphicon-zoom-out
  glyphicon glyphicon-off
  glyphicon glyphicon-signal
  glyphicon glyphicon-cog
  glyphicon glyphicon-trash
  glyphicon glyphicon-home
  glyphicon glyphicon-file
  glyphicon glyphicon-time
  glyphicon glyphicon-road
  glyphicon glyphicon-download-alt
  glyphicon glyphicon-download
  glyphicon glyphicon-upload
  glyphicon glyphicon-inbox
  glyphicon glyphicon-play-circle
  glyphicon glyphicon-repeat
  glyphicon glyphicon-refresh
  glyphicon glyphicon-list-alt
  glyphicon glyphicon-lock
  glyphicon glyphicon-flag
  glyphicon glyphicon-headphones
  glyphicon glyphicon-volume-off
  glyphicon glyphicon-volume-down
  glyphicon glyphicon-volume-up
  glyphicon glyphicon-qrcode
  glyphicon glyphicon-barcode
  glyphicon glyphicon-tag
  glyphicon glyphicon-tags
  glyphicon glyphicon-book
  glyphicon glyphicon-bookmark
  glyphicon glyphicon-print
  glyphicon glyphicon-camera
  glyphicon glyphicon-font
  glyphicon glyphicon-bold
  glyphicon glyphicon-italic
  glyphicon glyphicon-text-height
  glyphicon glyphicon-text-width
  glyphicon glyphicon-align-left
  glyphicon glyphicon-align-center
  glyphicon glyphicon-align-right
  glyphicon glyphicon-align-justify
  glyphicon glyphicon-list
  glyphicon glyphicon-indent-left
  glyphicon glyphicon-indent-right
  glyphicon glyphicon-facetime-video
  glyphicon glyphicon-picture
  glyphicon glyphicon-map-marker
  glyphicon glyphicon-adjust
  glyphicon glyphicon-tint
  glyphicon glyphicon-edit
  glyphicon glyphicon-share
  glyphicon glyphicon-check
  glyphicon glyphicon-move
  glyphicon glyphicon-step-backward
  glyphicon glyphicon-fast-backward
  glyphicon glyphicon-backward
  glyphicon glyphicon-play
  glyphicon glyphicon-pause
  glyphicon glyphicon-stop
  glyphicon glyphicon-forward
  glyphicon glyphicon-fast-forward
  glyphicon glyphicon-step-forward
  glyphicon glyphicon-eject
  glyphicon glyphicon-chevron-left
  glyphicon glyphicon-chevron-right
  glyphicon glyphicon-plus-sign
  glyphicon glyphicon-minus-sign
  glyphicon glyphicon-remove-sign
  glyphicon glyphicon-ok-sign
  glyphicon glyphicon-question-sign
  glyphicon glyphicon-info-sign
  glyphicon glyphicon-screenshot
  glyphicon glyphicon-remove-circle
  glyphicon glyphicon-ok-circle
  glyphicon glyphicon-ban-circle
  glyphicon glyphicon-arrow-left
  glyphicon glyphicon-arrow-right
  glyphicon glyphicon-arrow-up
  glyphicon glyphicon-arrow-down
  glyphicon glyphicon-share-alt
  glyphicon glyphicon-resize-full
  glyphicon glyphicon-resize-small
  glyphicon glyphicon-exclamation-sign
  glyphicon glyphicon-gift
  glyphicon glyphicon-leaf
  glyphicon glyphicon-fire
  glyphicon glyphicon-eye-open
  glyphicon glyphicon-eye-close
  glyphicon glyphicon-warning-sign
  glyphicon glyphicon-plane
  glyphicon glyphicon-calendar
  glyphicon glyphicon-random
  glyphicon glyphicon-comment
  glyphicon glyphicon-magnet
  glyphicon glyphicon-chevron-up
  glyphicon glyphicon-chevron-down
  glyphicon glyphicon-retweet
  glyphicon glyphicon-shopping-cart
  glyphicon glyphicon-folder-close
  glyphicon glyphicon-folder-open
  glyphicon glyphicon-resize-vertical
  glyphicon glyphicon-resize-horizontal
  glyphicon glyphicon-hdd
  glyphicon glyphicon-bullhorn
  glyphicon glyphicon-bell
  glyphicon glyphicon-certificate
  glyphicon glyphicon-thumbs-up
  glyphicon glyphicon-thumbs-down
  glyphicon glyphicon-hand-right
  glyphicon glyphicon-hand-left
  glyphicon glyphicon-hand-up
  glyphicon glyphicon-hand-down
  glyphicon glyphicon-circle-arrow-right
  glyphicon glyphicon-circle-arrow-left
  glyphicon glyphicon-circle-arrow-up
  glyphicon glyphicon-circle-arrow-down
  glyphicon glyphicon-globe
  glyphicon glyphicon-wrench
  glyphicon glyphicon-tasks
  glyphicon glyphicon-filter
  glyphicon glyphicon-briefcase
  glyphicon glyphicon-fullscreen
  glyphicon glyphicon-dashboard
  glyphicon glyphicon-paperclip
  glyphicon glyphicon-heart-empty
  glyphicon glyphicon-link
  glyphicon glyphicon-phone
  glyphicon glyphicon-pushpin
  glyphicon glyphicon-usd
  glyphicon glyphicon-gbp
  glyphicon glyphicon-sort
  glyphicon glyphicon-sort-by-alphabet
  glyphicon glyphicon-sort-by-alphabet-alt
  glyphicon glyphicon-sort-by-order
  glyphicon glyphicon-sort-by-order-alt
  glyphicon glyphicon-sort-by-attributes
  glyphicon glyphicon-sort-by-attributes-alt
  glyphicon glyphicon-unchecked
  glyphicon glyphicon-expand
  glyphicon glyphicon-collapse-down
  glyphicon glyphicon-collapse-up
glyphicon glyphicon-log-in
  glyphicon glyphicon-flash
  glyphicon glyphicon-log-out
  glyphicon glyphicon-new-window
  glyphicon glyphicon-record
  glyphicon glyphicon-save
  glyphicon glyphicon-open
  glyphicon glyphicon-saved
  glyphicon glyphicon-import
  glyphicon glyphicon-export
  glyphicon glyphicon-send
  glyphicon glyphicon-floppy-disk
  glyphicon glyphicon-floppy-saved
  glyphicon glyphicon-floppy-remove
  glyphicon glyphicon-floppy-save
  glyphicon glyphicon-floppy-open
  glyphicon glyphicon-credit-card
  glyphicon glyphicon-transfer
  glyphicon glyphicon-cutlery
  glyphicon glyphicon-header
  glyphicon glyphicon-compressed
  glyphicon glyphicon-earphone
  glyphicon glyphicon-phone-alt
  glyphicon glyphicon-tower
  glyphicon glyphicon-stats
  glyphicon glyphicon-sd-video
  glyphicon glyphicon-hd-video
  glyphicon glyphicon-subtitles
  glyphicon glyphicon-sound-stereo
  glyphicon glyphicon-sound-dolby
  glyphicon glyphicon-sound-5-1
  glyphicon glyphicon-sound-6-1
  glyphicon glyphicon-sound-7-1
  glyphicon glyphicon-copyright-mark
  glyphicon glyphicon-registration-mark
  glyphicon glyphicon-cloud-download
  glyphicon glyphicon-cloud-upload
  glyphicon glyphicon-tree-conifer
  glyphicon glyphicon-tree-deciduous
  glyphicon glyphicon-cd
  glyphicon glyphicon-save-file
  glyphicon glyphicon-open-file
  glyphicon glyphicon-level-up
  glyphicon glyphicon-copy
  glyphicon glyphicon-paste
  glyphicon glyphicon-alert
  glyphicon glyphicon-equalizer
  glyphicon glyphicon-king
  glyphicon glyphicon-queen
  glyphicon glyphicon-pawn
  glyphicon glyphicon-bishop
  glyphicon glyphicon-knight
  glyphicon glyphicon-baby-formula
  glyphicon glyphicon-tent
  glyphicon glyphicon-blackboard
  glyphicon glyphicon-bed
  glyphicon glyphicon-apple
  glyphicon glyphicon-erase
  glyphicon glyphicon-hourglass
  glyphicon glyphicon-lamp
  glyphicon glyphicon-duplicate
  glyphicon glyphicon-piggy-bank
  glyphicon glyphicon-scissors
  glyphicon glyphicon-bitcoin
  glyphicon glyphicon-btc
  glyphicon glyphicon-xbt
  glyphicon glyphicon-yen
  glyphicon glyphicon-jpy
  glyphicon glyphicon-ruble
  glyphicon glyphicon-rub
  glyphicon glyphicon-scale
  glyphicon glyphicon-ice-lolly
  glyphicon glyphicon-ice-lolly-tasted
  glyphicon glyphicon-education
  glyphicon glyphicon-option-horizontal
  glyphicon glyphicon-option-vertical
  glyphicon glyphicon-menu-hamburger
  glyphicon glyphicon-modal-window
  glyphicon glyphicon-oil
  glyphicon glyphicon-grain
  glyphicon glyphicon-sunglasses
  glyphicon glyphicon-text-size
  glyphicon glyphicon-text-color
  glyphicon glyphicon-text-background
  glyphicon glyphicon-object-align-top
  glyphicon glyphicon-object-align-bottom
  glyphicon glyphicon-object-align-horizontal
  glyphicon glyphicon-object-align-left
  glyphicon glyphicon-object-align-vertical
  glyphicon glyphicon-object-align-right
  glyphicon glyphicon-triangle-right
  glyphicon glyphicon-triangle-left
  glyphicon glyphicon-triangle-bottom
  glyphicon glyphicon-triangle-top
  glyphicon glyphicon-console
  glyphicon glyphicon-superscript
  glyphicon glyphicon-subscript
  glyphicon glyphicon-menu-left
  glyphicon glyphicon-menu-right
  glyphicon glyphicon-menu-down
  glyphicon glyphicon-menu-up

Коменти

Иван

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

Алексей

А как сделать блок, который у вас справа Підписуйся прямо зараз? Я так понимаю там тоже иконки, только другого цвета.

Назар Токар

Це .btn-group.

Роман

Кроме “встроенных” кнопок есть еще “примочка” с ОГРОМНЫМ количеством иконок самых разнообразных.. Font Awesome, который почти всегда “цепляют” к BS
В контексте статьи, думаю, стоит упомянуть и о них

Назар Токарь

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

Роман

@Назар Токарь, возможно.. но Font Awesome прямо вот особняком стоит – это мое мнение.. встроенных кнопок BS маловато

Назар Токарь

@Роман, согласен, он клёвый, но когда речь идёт о кастомизации, на сцене появляются IcoMoon Fontastic и их друзья. А в них обычно есть не только FA, но и с десяток других наборов шрифтов — выбираешь что хочешь.

Unnamed

Здравствуйте.
Вы писали о том, что 600 Кб – это недоступная роскошь для фронтэндера. А здесь оказывается, что все эти милые иконки весят половину этого размера. Или в нагрузку страницы идут только используемые иконки, а не все 300 Кб?

Назар Токарь

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

Unnamed

@Назар Токарь, вот последнее предложение меня и интересовало. Спасибо.

Artem

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

Назар Токарь

@Artem, это зависит от задачи. Если у вас есть возможность использовать BS, это сэкономит вам время. Можно брать только сетку (grid) и формы, а остальное делать самому.

Моё мнение: BS может заменить вам рутинную работу. А в таком случае используйте его в любом проекте, если он не помешает.

Artem

@Назар Токарь, вот брать только сетку и какие-нибудь базовые стили это по-моему оптимальное решение.

Nick

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

Назар Токарь

@Nick, спасибо. Кстати, “кокарда” — прекрасное слово :)

T7

@Nick, а мне “эмблема” нравится