Bootstrap: Glyphicons
Giải phóng thời gian, khai phóng năng lực
Các glyph sẵn có
Hỗ trợ 200 glyph dạng font từ tập hợp Glyphicon Halflings. Thực tế, Glyphicons Halflings không miễn phí, tuy nhiên nó được làm miễn phí cho Bootstrap. Vì vậy, chúng tôi sẽ rất cảm ơn nếu bạn gắn một liên kết tới Glyphicons nếu có thể.
- glyphicon glyphicon-asterisk
- glyphicon glyphicon-plus
- glyphicon glyphicon-euro
- glyphicon glyphicon-eur
- 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
Cách sử dụng
Vì lý do hiệu năng, toàn bộ các biểu tượng yêu cầu một class cơ sở và class cụ thể cho các biểu tượng đó. Để sử dụng, hãy thêm đoạn code sau đây vào nơi bạn sử dụng. Để hiển thị được tốt, bạn hãy nhớ luôn thêm một khoảng trắng vào giữa biểu tượng và text.
Đừng kết hợp với các thành phần khác
Các class biểu tượng không thể kết hợp trực tiếp với các thành phần khác. Cũng không nên sử dụng chúng với các class khác trên cùng một phần tử. Thay vì thế, hãy thêm <span>
vào bên trong của phần tử đó và sử dụng các class biểu tượng trên<span>
đó.
Chỉ sử dụng trên các phần tử rỗng
Các class biểu tượng chỉ nên được sử dụng trên các phần tử không chứa nội dung hoặc chứa các phần tử khác.
Thay đổi nơi lưu trữ font biểu tượng
Mặc định các tập tin font biểu tượng được lưu trữ trong thư mục ../fonts/
nằm ở vị trí tương đối với các tập tin CSS. Ví dụ, nếu như tập tin CSS của bạn được lưu trữ ở http://example.com/foobar/css/bootstrap.css
, thì các tập tin font biểu tượng sẽ được lưu trữ tại http://example.com/foobar/fonts/glyphicons-halflings-regular.woff
.
Nêu như bạn đang lưu trữ các tập tin font biểu tượng ở đâu đó (khác mặc định) hoặc thay đổi tên của tập tin, bạn sẽ phải thay đổi @icon-font-path
và/hoặc các biến Less @icon-font-name
tương ứng.
@import
ing Bootstrap thông qua Less có thể yêu cầu việc điều chỉnh nơi lưu trữ font biểu tượng
Nếu như bạn @import
mã nguồn Less của Bootstrap vào các tập tin Less của riêng bạn, bạn sẽ phải thay đổi biến số Less@icon-font-path
để các đường dẫn tương đối trong url(...)
có thể hoạt động được.
<span class="glyphicon glyphicon-search"></span>
Các ví dụ
Hãy sử dụng chúng trên các nút, các nhóm nút cho một thanh công cụ, thanh điều hướng hay các input cho phép gắn icon biểu tượng vào đằng trước.
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
Giải phóng thời gian, khai phóng năng lực