Фреймворк 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
Поширити у Фейсбуці
Надіслати у Messenger
Зберегти в Pocket
Надіслати в Telegram
Надіслати у WhatsApp

Додати коментар

Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

Ви вказали некоректні логін або пароль

Вибачте, для коментування необхідно увійти.

15 коментарів

спочатку нові
за рейтингом спочатку нові за хронологією

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

Автор
Назар Токар

Це .btn-group.

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

В контексте статьи, думаю, стоит упомянуть и о них

Автор
Назар Токар

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

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

Автор
Назар Токар

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

Здравствуйте.

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

Автор
Назар Токар

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

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

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

Автор
Назар Токар

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

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

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

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

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

Автор
Назар Токар

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