Назар Токар
Опубліковано: 4 Квітня 2015
Оновлено: 19 Листопада 2017

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

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

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

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

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

16 коментарів

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

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

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

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

Це .btn-group.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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