Wbudowane ikony Glyphicons w Bootstrap 3
.
Wbudowane ikony Glyphicons w Bootstrap 3 – często pomijana funkcja
Wielu użytkowników CMS PHP-Fusion przez lata korzysta ze stylów opartych na Bootstrap 3, nie zdając sobie sprawy, że wraz z arkuszem CSS automatycznie ładowany jest także zestaw ikon Glyphicons. Ikony te są dostępne od ręki i nie wymagają instalowania żadnych dodatkowych bibliotek.
Czym są Glyphicons w Bootstrap 3?
Glyphicons to zestaw ikon w formie fontu, który był domyślnie dołączany do Bootstrapa 3. Oznacza to, że jeżeli Twoja strona używa tego frameworka, ikony są już obecne i gotowe do użycia — nawet jeśli nigdy wcześniej z nich nie korzystałeś.
Dlaczego wiele osób z nich nie korzysta?
Najczęściej powodem jest brak świadomości. Ikony ładują się automatycznie razem ze stylem CSS, ale jeśli nikt wcześniej nie pokazał, jak ich używać, łatwo założyć, że potrzebna jest dodatkowa biblioteka, np. Font Awesome. W praktyce Glyphicons są dostępne bez żadnych dodatkowych plików.
Jak używa się ikon Glyphicons?
Ikony Glyphicons są wywoływane za pomocą klas CSS, np.
glyphicon glyphicon-alertSame klasy można zastosować do dowolnego elementu HTML, takiego jak
spani, przycisk lub link. Dzięki temu użytkownik sam decyduje, w jakim kontekście chce użyć ikony.
Gotowe do użycia bez dodatkowych obciążeń
Ponieważ ikony są już ładowane razem z Bootstrapem 3, ich wykorzystanie nie zwiększa liczby zapytań HTTP ani nie obciąża strony dodatkowymi plikami. To szczególnie istotne w starszych instalacjach CMS, gdzie wydajność i prostota mają duże znaczenie.
Dla kogo jest ta strona?
Ta strona powstała z myślą o użytkownikach PHP-Fusion oraz innych systemów CMS, którzy nadal korzystają z Bootstrap 3 i chcą w pełni wykorzystać możliwości już dostępne w ich szablonach. Jeżeli szukałeś listy ikon Glyphicons lub sposobu na ich szybkie kopiowanie — jesteś we właściwym miejscu.
Czasem wystarczy uświadomić sobie, że to, czego potrzebujemy, od dawna jest już częścią naszego projektu.
Bootstrap 3 – Glyphicons
Kliknij ikonę, aby skopiować klasę
glyphicon-adjust
<span class="glyphicon glyphicon-adjust"></span>
glyphicon-alert
<span class="glyphicon glyphicon-alert"></span>
glyphicon-align-center
<span class="glyphicon glyphicon-align-center"></span>
glyphicon-align-justify
<span class="glyphicon glyphicon-align-justify"></span>
glyphicon-align-left
<span class="glyphicon glyphicon-align-left"></span>
glyphicon-align-right
<span class="glyphicon glyphicon-align-right"></span>
glyphicon-apple
<span class="glyphicon glyphicon-apple"></span>
glyphicon-arrow-down
<span class="glyphicon glyphicon-arrow-down"></span>
glyphicon-arrow-left
<span class="glyphicon glyphicon-arrow-left"></span>
glyphicon-arrow-right
<span class="glyphicon glyphicon-arrow-right"></span>
glyphicon-arrow-up
<span class="glyphicon glyphicon-arrow-up"></span>
glyphicon-asterisk
<span class="glyphicon glyphicon-asterisk"></span>
glyphicon-baby-formula
<span class="glyphicon glyphicon-baby-formula"></span>
glyphicon-backward
<span class="glyphicon glyphicon-backward"></span>
glyphicon-ban-circle
<span class="glyphicon glyphicon-ban-circle"></span>
glyphicon-barcode
<span class="glyphicon glyphicon-barcode"></span>
glyphicon-bed
<span class="glyphicon glyphicon-bed"></span>
glyphicon-bell
<span class="glyphicon glyphicon-bell"></span>
glyphicon-bishop
<span class="glyphicon glyphicon-bishop"></span>
glyphicon-bitcoin
<span class="glyphicon glyphicon-bitcoin"></span>
glyphicon-blackboard
<span class="glyphicon glyphicon-blackboard"></span>
glyphicon-bold
<span class="glyphicon glyphicon-bold"></span>
glyphicon-book
<span class="glyphicon glyphicon-book"></span>
glyphicon-bookmark
<span class="glyphicon glyphicon-bookmark"></span>
glyphicon-briefcase
<span class="glyphicon glyphicon-briefcase"></span>
glyphicon-btc
<span class="glyphicon glyphicon-btc"></span>
glyphicon-bullhorn
<span class="glyphicon glyphicon-bullhorn"></span>
glyphicon-calendar
<span class="glyphicon glyphicon-calendar"></span>
glyphicon-camera
<span class="glyphicon glyphicon-camera"></span>
glyphicon-cd
<span class="glyphicon glyphicon-cd"></span>
glyphicon-certificate
<span class="glyphicon glyphicon-certificate"></span>
glyphicon-check
<span class="glyphicon glyphicon-check"></span>
glyphicon-chevron-down
<span class="glyphicon glyphicon-chevron-down"></span>
glyphicon-chevron-left
<span class="glyphicon glyphicon-chevron-left"></span>
glyphicon-chevron-right
<span class="glyphicon glyphicon-chevron-right"></span>
glyphicon-chevron-up
<span class="glyphicon glyphicon-chevron-up"></span>
glyphicon-circle-arrow-down
<span class="glyphicon glyphicon-circle-arrow-down"></span>
glyphicon-circle-arrow-left
<span class="glyphicon glyphicon-circle-arrow-left"></span>
glyphicon-circle-arrow-right
<span class="glyphicon glyphicon-circle-arrow-right"></span>
glyphicon-circle-arrow-up
<span class="glyphicon glyphicon-circle-arrow-up"></span>
glyphicon-cloud
<span class="glyphicon glyphicon-cloud"></span>
glyphicon-cloud-download
<span class="glyphicon glyphicon-cloud-download"></span>
glyphicon-cloud-upload
<span class="glyphicon glyphicon-cloud-upload"></span>
glyphicon-cog
<span class="glyphicon glyphicon-cog"></span>
glyphicon-collapse-down
<span class="glyphicon glyphicon-collapse-down"></span>
glyphicon-collapse-up
<span class="glyphicon glyphicon-collapse-up"></span>
glyphicon-comment
<span class="glyphicon glyphicon-comment"></span>
glyphicon-compressed
<span class="glyphicon glyphicon-compressed"></span>
glyphicon-console
<span class="glyphicon glyphicon-console"></span>
glyphicon-copy
<span class="glyphicon glyphicon-copy"></span>
glyphicon-copyright-mark
<span class="glyphicon glyphicon-copyright-mark"></span>
glyphicon-credit-card
<span class="glyphicon glyphicon-credit-card"></span>
glyphicon-cutlery
<span class="glyphicon glyphicon-cutlery"></span>
glyphicon-dashboard
<span class="glyphicon glyphicon-dashboard"></span>
glyphicon-download
<span class="glyphicon glyphicon-download"></span>
glyphicon-download-alt
<span class="glyphicon glyphicon-download-alt"></span>
glyphicon-duplicate
<span class="glyphicon glyphicon-duplicate"></span>
glyphicon-earphone
<span class="glyphicon glyphicon-earphone"></span>
glyphicon-edit
<span class="glyphicon glyphicon-edit"></span>
glyphicon-education
<span class="glyphicon glyphicon-education"></span>
glyphicon-eject
<span class="glyphicon glyphicon-eject"></span>
glyphicon-envelope
<span class="glyphicon glyphicon-envelope"></span>
glyphicon-equalizer
<span class="glyphicon glyphicon-equalizer"></span>
glyphicon-erase
<span class="glyphicon glyphicon-erase"></span>
glyphicon-eur
<span class="glyphicon glyphicon-eur"></span>
glyphicon-euro
<span class="glyphicon glyphicon-euro"></span>
glyphicon-exclamation-sign
<span class="glyphicon glyphicon-exclamation-sign"></span>
glyphicon-expand
<span class="glyphicon glyphicon-expand"></span>
glyphicon-export
<span class="glyphicon glyphicon-export"></span>
glyphicon-eye-close
<span class="glyphicon glyphicon-eye-close"></span>
glyphicon-eye-open
<span class="glyphicon glyphicon-eye-open"></span>
glyphicon-facetime-video
<span class="glyphicon glyphicon-facetime-video"></span>
glyphicon-fast-backward
<span class="glyphicon glyphicon-fast-backward"></span>
glyphicon-fast-forward
<span class="glyphicon glyphicon-fast-forward"></span>
glyphicon-file
<span class="glyphicon glyphicon-file"></span>
glyphicon-film
<span class="glyphicon glyphicon-film"></span>
glyphicon-filter
<span class="glyphicon glyphicon-filter"></span>
glyphicon-fire
<span class="glyphicon glyphicon-fire"></span>
glyphicon-flag
<span class="glyphicon glyphicon-flag"></span>
glyphicon-flash
<span class="glyphicon glyphicon-flash"></span>
glyphicon-floppy-disk
<span class="glyphicon glyphicon-floppy-disk"></span>
glyphicon-floppy-open
<span class="glyphicon glyphicon-floppy-open"></span>
glyphicon-floppy-remove
<span class="glyphicon glyphicon-floppy-remove"></span>
glyphicon-floppy-save
<span class="glyphicon glyphicon-floppy-save"></span>
glyphicon-floppy-saved
<span class="glyphicon glyphicon-floppy-saved"></span>
glyphicon-folder-close
<span class="glyphicon glyphicon-folder-close"></span>
glyphicon-folder-open
<span class="glyphicon glyphicon-folder-open"></span>
glyphicon-font
<span class="glyphicon glyphicon-font"></span>
glyphicon-forward
<span class="glyphicon glyphicon-forward"></span>
glyphicon-fullscreen
<span class="glyphicon glyphicon-fullscreen"></span>
glyphicon-gbp
<span class="glyphicon glyphicon-gbp"></span>
glyphicon-gift
<span class="glyphicon glyphicon-gift"></span>
glyphicon-glass
<span class="glyphicon glyphicon-glass"></span>
glyphicon-globe
<span class="glyphicon glyphicon-globe"></span>
glyphicon-grain
<span class="glyphicon glyphicon-grain"></span>
glyphicon-hand-down
<span class="glyphicon glyphicon-hand-down"></span>
glyphicon-hand-left
<span class="glyphicon glyphicon-hand-left"></span>
glyphicon-hand-right
<span class="glyphicon glyphicon-hand-right"></span>
glyphicon-hand-up
<span class="glyphicon glyphicon-hand-up"></span>
glyphicon-hd-video
<span class="glyphicon glyphicon-hd-video"></span>
glyphicon-hdd
<span class="glyphicon glyphicon-hdd"></span>
glyphicon-header
<span class="glyphicon glyphicon-header"></span>
glyphicon-headphones
<span class="glyphicon glyphicon-headphones"></span>
glyphicon-heart
<span class="glyphicon glyphicon-heart"></span>
glyphicon-heart-empty
<span class="glyphicon glyphicon-heart-empty"></span>
glyphicon-home
<span class="glyphicon glyphicon-home"></span>
glyphicon-hourglass
<span class="glyphicon glyphicon-hourglass"></span>
glyphicon-ice-lolly
<span class="glyphicon glyphicon-ice-lolly"></span>
glyphicon-ice-lolly-tasted
<span class="glyphicon glyphicon-ice-lolly-tasted"></span>
glyphicon-import
<span class="glyphicon glyphicon-import"></span>
glyphicon-inbox
<span class="glyphicon glyphicon-inbox"></span>
glyphicon-indent-left
<span class="glyphicon glyphicon-indent-left"></span>
glyphicon-indent-right
<span class="glyphicon glyphicon-indent-right"></span>
glyphicon-info-sign
<span class="glyphicon glyphicon-info-sign"></span>
glyphicon-italic
<span class="glyphicon glyphicon-italic"></span>
glyphicon-jpy
<span class="glyphicon glyphicon-jpy"></span>
glyphicon-king
<span class="glyphicon glyphicon-king"></span>
glyphicon-knight
<span class="glyphicon glyphicon-knight"></span>
glyphicon-lamp
<span class="glyphicon glyphicon-lamp"></span>
glyphicon-leaf
<span class="glyphicon glyphicon-leaf"></span>
glyphicon-level-up
<span class="glyphicon glyphicon-level-up"></span>
glyphicon-link
<span class="glyphicon glyphicon-link"></span>
glyphicon-list
<span class="glyphicon glyphicon-list"></span>
glyphicon-list-alt
<span class="glyphicon glyphicon-list-alt"></span>
glyphicon-lock
<span class="glyphicon glyphicon-lock"></span>
glyphicon-log-in
<span class="glyphicon glyphicon-log-in"></span>
glyphicon-log-out
<span class="glyphicon glyphicon-log-out"></span>
glyphicon-magnet
<span class="glyphicon glyphicon-magnet"></span>
glyphicon-map-marker
<span class="glyphicon glyphicon-map-marker"></span>
glyphicon-menu-down
<span class="glyphicon glyphicon-menu-down"></span>
glyphicon-menu-hamburger
<span class="glyphicon glyphicon-menu-hamburger"></span>
glyphicon-menu-left
<span class="glyphicon glyphicon-menu-left"></span>
glyphicon-menu-right
<span class="glyphicon glyphicon-menu-right"></span>
glyphicon-menu-up
<span class="glyphicon glyphicon-menu-up"></span>
glyphicon-minus
<span class="glyphicon glyphicon-minus"></span>
glyphicon-minus-sign
<span class="glyphicon glyphicon-minus-sign"></span>
glyphicon-modal-window
<span class="glyphicon glyphicon-modal-window"></span>
glyphicon-move
<span class="glyphicon glyphicon-move"></span>
glyphicon-music
<span class="glyphicon glyphicon-music"></span>
glyphicon-new-window
<span class="glyphicon glyphicon-new-window"></span>
glyphicon-object-align-bottom
<span class="glyphicon glyphicon-object-align-bottom"></span>
glyphicon-object-align-horizontal
<span class="glyphicon glyphicon-object-align-horizontal"></span>
glyphicon-object-align-left
<span class="glyphicon glyphicon-object-align-left"></span>
glyphicon-object-align-right
<span class="glyphicon glyphicon-object-align-right"></span>
glyphicon-object-align-top
<span class="glyphicon glyphicon-object-align-top"></span>
glyphicon-object-align-vertical
<span class="glyphicon glyphicon-object-align-vertical"></span>
glyphicon-off
<span class="glyphicon glyphicon-off"></span>
glyphicon-oil
<span class="glyphicon glyphicon-oil"></span>
glyphicon-ok
<span class="glyphicon glyphicon-ok"></span>
glyphicon-ok-circle
<span class="glyphicon glyphicon-ok-circle"></span>
glyphicon-ok-sign
<span class="glyphicon glyphicon-ok-sign"></span>
glyphicon-open
<span class="glyphicon glyphicon-open"></span>
glyphicon-open-file
<span class="glyphicon glyphicon-open-file"></span>
glyphicon-option-horizontal
<span class="glyphicon glyphicon-option-horizontal"></span>
glyphicon-option-vertical
<span class="glyphicon glyphicon-option-vertical"></span>
glyphicon-paperclip
<span class="glyphicon glyphicon-paperclip"></span>
glyphicon-paste
<span class="glyphicon glyphicon-paste"></span>
glyphicon-pause
<span class="glyphicon glyphicon-pause"></span>
glyphicon-pawn
<span class="glyphicon glyphicon-pawn"></span>
glyphicon-pencil
<span class="glyphicon glyphicon-pencil"></span>
glyphicon-phone
<span class="glyphicon glyphicon-phone"></span>
glyphicon-phone-alt
<span class="glyphicon glyphicon-phone-alt"></span>
glyphicon-picture
<span class="glyphicon glyphicon-picture"></span>
glyphicon-piggy-bank
<span class="glyphicon glyphicon-piggy-bank"></span>
glyphicon-plane
<span class="glyphicon glyphicon-plane"></span>
glyphicon-play
<span class="glyphicon glyphicon-play"></span>
glyphicon-play-circle
<span class="glyphicon glyphicon-play-circle"></span>
glyphicon-plus
<span class="glyphicon glyphicon-plus"></span>
glyphicon-plus-sign
<span class="glyphicon glyphicon-plus-sign"></span>
glyphicon-print
<span class="glyphicon glyphicon-print"></span>
glyphicon-pushpin
<span class="glyphicon glyphicon-pushpin"></span>
glyphicon-qrcode
<span class="glyphicon glyphicon-qrcode"></span>
glyphicon-queen
<span class="glyphicon glyphicon-queen"></span>
glyphicon-question-sign
<span class="glyphicon glyphicon-question-sign"></span>
glyphicon-random
<span class="glyphicon glyphicon-random"></span>
glyphicon-record
<span class="glyphicon glyphicon-record"></span>
glyphicon-refresh
<span class="glyphicon glyphicon-refresh"></span>
glyphicon-registration-mark
<span class="glyphicon glyphicon-registration-mark"></span>
glyphicon-remove
<span class="glyphicon glyphicon-remove"></span>
glyphicon-remove-circle
<span class="glyphicon glyphicon-remove-circle"></span>
glyphicon-remove-sign
<span class="glyphicon glyphicon-remove-sign"></span>
glyphicon-repeat
<span class="glyphicon glyphicon-repeat"></span>
glyphicon-resize-full
<span class="glyphicon glyphicon-resize-full"></span>
glyphicon-resize-horizontal
<span class="glyphicon glyphicon-resize-horizontal"></span>
glyphicon-resize-small
<span class="glyphicon glyphicon-resize-small"></span>
glyphicon-resize-vertical
<span class="glyphicon glyphicon-resize-vertical"></span>
glyphicon-retweet
<span class="glyphicon glyphicon-retweet"></span>
glyphicon-road
<span class="glyphicon glyphicon-road"></span>
glyphicon-rub
<span class="glyphicon glyphicon-rub"></span>
glyphicon-ruble
<span class="glyphicon glyphicon-ruble"></span>
glyphicon-save
<span class="glyphicon glyphicon-save"></span>
glyphicon-save-file
<span class="glyphicon glyphicon-save-file"></span>
glyphicon-saved
<span class="glyphicon glyphicon-saved"></span>
glyphicon-scale
<span class="glyphicon glyphicon-scale"></span>
glyphicon-scissors
<span class="glyphicon glyphicon-scissors"></span>
glyphicon-screenshot
<span class="glyphicon glyphicon-screenshot"></span>
glyphicon-sd-video
<span class="glyphicon glyphicon-sd-video"></span>
glyphicon-search
<span class="glyphicon glyphicon-search"></span>
glyphicon-send
<span class="glyphicon glyphicon-send"></span>
glyphicon-share
<span class="glyphicon glyphicon-share"></span>
glyphicon-share-alt
<span class="glyphicon glyphicon-share-alt"></span>
glyphicon-shopping-cart
<span class="glyphicon glyphicon-shopping-cart"></span>
glyphicon-signal
<span class="glyphicon glyphicon-signal"></span>
glyphicon-sort
<span class="glyphicon glyphicon-sort"></span>
glyphicon-sort-by-alphabet
<span class="glyphicon glyphicon-sort-by-alphabet"></span>
glyphicon-sort-by-alphabet-alt
<span class="glyphicon glyphicon-sort-by-alphabet-alt"></span>
glyphicon-sort-by-attributes
<span class="glyphicon glyphicon-sort-by-attributes"></span>
glyphicon-sort-by-attributes-alt
<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
glyphicon-sort-by-order
<span class="glyphicon glyphicon-sort-by-order"></span>
glyphicon-sort-by-order-alt
<span class="glyphicon glyphicon-sort-by-order-alt"></span>
glyphicon-sound-5-1
<span class="glyphicon glyphicon-sound-5-1"></span>
glyphicon-sound-6-1
<span class="glyphicon glyphicon-sound-6-1"></span>
glyphicon-sound-7-1
<span class="glyphicon glyphicon-sound-7-1"></span>
glyphicon-sound-dolby
<span class="glyphicon glyphicon-sound-dolby"></span>
glyphicon-sound-stereo
<span class="glyphicon glyphicon-sound-stereo"></span>
glyphicon-star
<span class="glyphicon glyphicon-star"></span>
glyphicon-star-empty
<span class="glyphicon glyphicon-star-empty"></span>
glyphicon-stats
<span class="glyphicon glyphicon-stats"></span>
glyphicon-step-backward
<span class="glyphicon glyphicon-step-backward"></span>
glyphicon-step-forward
<span class="glyphicon glyphicon-step-forward"></span>
glyphicon-stop
<span class="glyphicon glyphicon-stop"></span>
glyphicon-subscript
<span class="glyphicon glyphicon-subscript"></span>
glyphicon-subtitles
<span class="glyphicon glyphicon-subtitles"></span>
glyphicon-sunglasses
<span class="glyphicon glyphicon-sunglasses"></span>
glyphicon-superscript
<span class="glyphicon glyphicon-superscript"></span>
glyphicon-tag
<span class="glyphicon glyphicon-tag"></span>
glyphicon-tags
<span class="glyphicon glyphicon-tags"></span>
glyphicon-tasks
<span class="glyphicon glyphicon-tasks"></span>
glyphicon-tent
<span class="glyphicon glyphicon-tent"></span>
glyphicon-text-background
<span class="glyphicon glyphicon-text-background"></span>
glyphicon-text-color
<span class="glyphicon glyphicon-text-color"></span>
glyphicon-text-height
<span class="glyphicon glyphicon-text-height"></span>
glyphicon-text-size
<span class="glyphicon glyphicon-text-size"></span>
glyphicon-text-width
<span class="glyphicon glyphicon-text-width"></span>
glyphicon-th
<span class="glyphicon glyphicon-th"></span>
glyphicon-th-large
<span class="glyphicon glyphicon-th-large"></span>
glyphicon-th-list
<span class="glyphicon glyphicon-th-list"></span>
glyphicon-thumbs-down
<span class="glyphicon glyphicon-thumbs-down"></span>
glyphicon-thumbs-up
<span class="glyphicon glyphicon-thumbs-up"></span>
glyphicon-time
<span class="glyphicon glyphicon-time"></span>
glyphicon-tint
<span class="glyphicon glyphicon-tint"></span>
glyphicon-tower
<span class="glyphicon glyphicon-tower"></span>
glyphicon-transfer
<span class="glyphicon glyphicon-transfer"></span>
glyphicon-trash
<span class="glyphicon glyphicon-trash"></span>
glyphicon-tree-conifer
<span class="glyphicon glyphicon-tree-conifer"></span>
glyphicon-tree-deciduous
<span class="glyphicon glyphicon-tree-deciduous"></span>
glyphicon-triangle-bottom
<span class="glyphicon glyphicon-triangle-bottom"></span>
glyphicon-triangle-left
<span class="glyphicon glyphicon-triangle-left"></span>
glyphicon-triangle-right
<span class="glyphicon glyphicon-triangle-right"></span>
glyphicon-triangle-top
<span class="glyphicon glyphicon-triangle-top"></span>
glyphicon-unchecked
<span class="glyphicon glyphicon-unchecked"></span>
glyphicon-upload
<span class="glyphicon glyphicon-upload"></span>
glyphicon-usd
<span class="glyphicon glyphicon-usd"></span>
glyphicon-user
<span class="glyphicon glyphicon-user"></span>
glyphicon-volume-down
<span class="glyphicon glyphicon-volume-down"></span>
glyphicon-volume-off
<span class="glyphicon glyphicon-volume-off"></span>
glyphicon-volume-up
<span class="glyphicon glyphicon-volume-up"></span>
glyphicon-warning-sign
<span class="glyphicon glyphicon-warning-sign"></span>
glyphicon-wrench
<span class="glyphicon glyphicon-wrench"></span>
glyphicon-xbt
<span class="glyphicon glyphicon-xbt"></span>
glyphicon-yen
<span class="glyphicon glyphicon-yen"></span>
glyphicon-zoom-in
<span class="glyphicon glyphicon-zoom-in"></span>
glyphicon-zoom-out
<span class="glyphicon glyphicon-zoom-out"></span>
January 22 2026
Brak komentarzy.