Фреймворк Bootstrap предлагает вам, кроме прочего и кроме шуток, почти три сотни бесплатных векторных иконок. Хранятся эти иконки в виде векторного шрифта, который весит около 300 Кб. Несмотря на то, что этот набор платный, автор разрешил его бесплатное использование и в благодарность просит размещать ссылку на его проект Glyphicons. Что я и делаю.
В общем, спасибо Яну Коваржику из чешского маленького города Оломоуц, сегодня его клёвыми иконами пользуются миллионы фронтендеров по всему миру :).
А теперь я расскажу, как и вам примкнуть к остальным и начать пользоваться иконками из бутстрапа.
Как найти
Иконочный шрифт подключается вместе с самим фреймворком Bootstrap и находится в папке fonts. Не пугайтесь обилию содержимого папки: файлы ttf, woff и остальные используются для корректного отображения в разных браузерах.
Вы можете использовать только шрифт без использования самого фреймворка, для этого достаточно будет зайти на страницу, где обычно скачивают 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, но и с десяток других наборов шрифтов — выбираешь что хочешь.
Здравствуйте.
Вы писали о том, что 600 Кб – это недоступная роскошь для фронтэндера. А здесь оказывается, что все эти милые иконки весят половину этого размера. Или в нагрузку страницы идут только используемые иконки, а не все 300 Кб?
@Unnamed, если вам не нужны иконки или какие-то другие компоненты фреймворка, при кастомизации вы их удаляете. Кроме того, на основе иконочного шрифта вы можете создать свой, куда включить только те иконки, которые будете использовать.
@Назар Токарь, вот последнее предложение меня и интересовало. Спасибо.
Назар, помогите разрешить дилемму в моей голове. Если я правильно понял, то использовать Bootstrap стоит только тогда, когда тебе нужно быстро создать какой-нибудь не сильно страшный интерфейс. Но если ты верстаешь страницу по уже готовому макету, то проще все стили писать с нуля, чем менять Bootstrap’овские. Не правда ли?
@Artem, это зависит от задачи. Если у вас есть возможность использовать BS, это сэкономит вам время. Можно брать только сетку (grid) и формы, а остальное делать самому.
Моё мнение: BS может заменить вам рутинную работу. А в таком случае используйте его в любом проекте, если он не помешает.
@Назар Токарь, вот брать только сетку и какие-нибудь базовые стили это по-моему оптимальное решение.
Да, “стикер”, наверное, лучше всего, потому что прочие варианты — эмблема, значок, кокарда, бейджик — подходят еще меньше, а слово “метка” в программировании и так уже перегружено.
@Nick, спасибо. Кстати, “кокарда” — прекрасное слово :)
@Nick, а мне “эмблема” нравится