A presença de ícones que explicitem para o usuário do que se trata aquela opção é muito importante em qualquer tipo de aplicação, principalmente em soluções web e mobile. Nessa documentação, conheceremos as opções oferecidas pelo Bootstrap, isto é, analisaremos alguns dos seus ícones, também chamados de glyphicons.

Classes CSS para glyphicons

Os glyphicons fazem parte de um conjunto de elementos que normalmente não está disponível aos desenvolvedores de forma gratuita. Entretanto, o Bootstrap, através de um acordo, consegue fornecer vários deles sem custo, para que seja possível a criação de experiências melhores para os usuários. O Bootstrap pede apenas, como agradecimento, que haja alguma referência ao website desses ícones, o http://glyphicons.com/, sempre que possível.

No Bootstrap, esses ícones são controlados através de classes CSS. Assim, sua utilização acaba sendo muito simples. Todos eles possuem a classe base glyphicon e uma classe específica, que representa o ícone de fato. Por exemplo, glyphicon glyphicon-plus representa o ícone “+” e glyphicon glyphicon-search representa o ícone da busca. A seguir temos os elementos listados no website do Bootstrap, na seção de componentes.

glyphicon-asterisk
glyphicon glyphicon-asterisk
glyphicon-plus
glyphicon glyphicon-plus
glyphicon-euro
glyphicon glyphicon-euro
glyphicon-eur
glyphicon glyphicon-eur
glyphicon-minus
glyphicon glyphicon-minus
glyphicon-cloud
glyphicon glyphicon-cloud
glyphicon-envelope
glyphicon glyphicon-envelope
glyphicon-pencil
glyphicon glyphicon-pencil
glyphicon-glass
glyphicon glyphicon-glass
glyphicon-music
glyphicon glyphicon-music
glyphicon-search
glyphicon glyphicon-search
glyphicon-heart
glyphicon glyphicon-heart
glyphicon-star
glyphicon glyphicon-star
glyphicon-star-empety
glyphicon glyphicon-star-empety
glyphicon-user
glyphicon glyphicon-user
glyphicon-film
glyphicon glyphicon-film
glyphicon-th-large
glyphicon glyphicon-th-large
glyphicon-th
glyphicon glyphicon-th
glyphicon-th-list
glyphicon glyphicon-th-list
glyphicon-ok
glyphicon glyphicon-ok
glyphicon-remove
glyphicon glyphicon-remove
glyphicon-zoom-in
glyphicon glyphicon-zoom-in
glyphicon-zoom-out
glyphicon glyphicon-zoom-out
glyphicon-off
glyphicon glyphicon-off
glyphicon-signal
glyphicon glyphicon-signal
glyphicon-cog
glyphicon glyphicon-cog
glyphicon-trash
glyphicon glyphicon-trash
glyphicon-home
glyphicon glyphicon-home
glyphicon-file
glyphicon glyphicon-file
glyphicon-time
glyphicon glyphicon-time
glyphicon-road
glyphicon glyphicon-road
glyphicon-download-alt
glyphicon glyphicon-download-alt
glyphicon-download
glyphicon glyphicon-download
glyphicon-upload
glyphicon glyphicon-upload
glyphicon-inbox
glyphicon glyphicon-inbox
glyphicon-play-circle
glyphicon glyphicon-play-circle
glyphicon-repeat
glyphicon glyphicon-repeat
glyphicon-refresh
glyphicon glyphicon-refresh
glyphicon-list-alt
glyphicon glyphicon-list-alt
glyphicon-lock
glyphicon glyphicon-lock
glyphicon-flag
glyphicon glyphicon-flag
glyphicon-headphones
glyphicon glyphicon-headphones
glyphicon-volume-off
glyphicon glyphicon-volume-off
glyphicon-volume-down
glyphicon glyphicon-volume-down
glyphicon-volume-up
glyphicon glyphicon-volume-up
glyphicon-qrcode
glyphicon glyphicon-qrcode
glyphicon-barcode
glyphicon glyphicon-barcode
glyphicon-tag
glyphicon glyphicon-tag
glyphicon-tags
glyphicon glyphicon-tags
glyphicon-book
glyphicon glyphicon-book
glyphicon-bookmark
glyphicon glyphicon-bookmark
glyphicon-print
glyphicon glyphicon-print
glyphicon-camera
glyphicon glyphicon-camera
glyphicon-font
glyphicon glyphicon-font
glyphicon-bold
glyphicon glyphicon-bold
glyphicon-italic
glyphicon glyphicon-italic
glyphicon-text-height
glyphicon glyphicon-text-height
glyphicon-text-width
glyphicon glyphicon-text-width
glyphicon-align-left
glyphicon glyphicon-align-left
glyphicon-align-center
glyphicon glyphicon-align-center
glyphicon-align-right
glyphicon glyphicon-align-right
glyphicon-align-justify
glyphicon glyphicon-align-justify
glyphicon-glyphicon-list
glyphicon glyphicon-list
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-left
glyphicon-indent-right
glyphicon glyphicon-indent-right
glyphicon-facetime-video
glyphicon glyphicon-facetime-video
glyphicon-picture
glyphicon glyphicon-picture
glyphicon-map-marker
glyphicon glyphicon-map-marker
glyphicon-adjust
glyphicon glyphicon-adjust
glyphicon-tint
glyphicon glyphicon-tint
glyphicon-edit
glyphicon glyphicon-edit
glyphicon-share
glyphicon glyphicon-share
glyphicon-check
glyphicon glyphicon-check
glyphicon-move
glyphicon glyphicon-move
glyphicon-step-backward
glyphicon glyphicon-step-backward
glyphicon-fast-backward
glyphicon glyphicon-fast-backward
glyphicon-backward
glyphicon glyphicon-backward
glyphicon-play
glyphicon glyphicon-play
glyphicon-pause
glyphicon glyphicon-pause
glyphicon-stop
glyphicon glyphicon-stop
glyphicon-forward
glyphicon glyphicon-forward
glyphicon-fast-forward
glyphicon glyphicon-fast-forward
glyphicon-step-forward
glyphicon glyphicon-step-forward
glyphicon-eject
glyphicon glyphicon-eject
glyphicon-chevron-left
glyphicon glyphicon-chevron-left
glyphicon-chevron-right
glyphicon glyphicon-chevron-right
glyphicon-plus-sign
glyphicon glyphicon-plus-sign
glyphicon-minus-sign
glyphicon glyphicon-minus-sign
glyphicon-remove-sign
glyphicon glyphicon-remove-sign
glyphicon-ok-sign
glyphicon glyphicon-ok-sign
glyphicon-question-sign
glyphicon glyphicon-question-sign
glyphicon-info-sign
glyphicon glyphicon-info-sign
glyphicon-screenshot
glyphicon glyphicon-screenshot
glyphicon-remove-circle
glyphicon glyphicon-remove-circle
glyphicon-ok-circle
glyphicon glyphicon-ok-circle
glyphicon-ban-circle
glyphicon glyphicon-ban-circle
glyphicon-arrow-left
glyphicon glyphicon-arrow-left
glyphicon-arrow-right
glyphicon glyphicon-arrow-right
glyphicon-arrow-up
glyphicon glyphicon-arrow-up
glyphicon-arrow-down
glyphicon glyphicon-arrow-down
glyphicon-share-alt
glyphicon glyphicon-share-alt
glyphicon-resize-full
glyphicon glyphicon-resize-full
glyphicon-resize-small
glyphicon glyphicon-resize-small
glyphicon-exclamation-sign
glyphicon glyphicon-exclamation-sign
glyphicon-gift
glyphicon glyphicon-gift
glyphicon-leaf
glyphicon glyphicon-leaf
glyphicon-fire
glyphicon glyphicon-fire
glyphicon-eye-open
glyphicon glyphicon-eye-open
glyphicon-eye-close
glyphicon glyphicon-eye-close
glyphicon-warning-sign
glyphicon glyphicon-warning-sign
glyphicon-plane
glyphicon glyphicon-plane
glyphicon-calendar
glyphicon glyphicon-calendar
glyphicon-random
glyphicon glyphicon-random
glyphicon-comment
glyphicon glyphicon-comment
glyphicon-magnet
glyphicon glyphicon-magnet
glyphicon-chevron-up
glyphicon glyphicon-chevron-up
glyphicon-chevron-down
glyphicon glyphicon-chevron-down
glyphicon-retweet
glyphicon glyphicon-retweet
glyphicon-shopping-cart
glyphicon glyphicon-shopping-cart
glyphicon-folder-close
glyphicon glyphicon-folder-close
glyphicon-folder-open
glyphicon glyphicon-folder-open
glyphicon-resize-vertical
glyphicon glyphicon-resize-vertical
glyphicon-resize-horizontal
glyphicon glyphicon-resize-horizontal
glyphicon-hdd
glyphicon glyphicon-hdd
glyphicon-bullhorn
glyphicon glyphicon-bullhorn
glyphicon-bell
glyphicon glyphicon-bell
glyphicon-certificate
glyphicon glyphicon-certificate
glyphicon-thumbs-up
glyphicon glyphicon-thumbs-up
glyphicon-thumbs-down
glyphicon glyphicon-thumbs-down
glyphicon-hand-right
glyphicon glyphicon-hand-right
glyphicon-hand-left
glyphicon glyphicon-hand-left
glyphicon-hand-up
glyphicon glyphicon-hand-up
glyphicon-hand-down
glyphicon glyphicon-hand-down
glyphicon-arrow-right
glyphicon glyphicon-arrow-right
glyphicon-arrow-left
glyphicon glyphicon-arrow-left
glyphicon-arrow-up
glyphicon glyphicon-arrow-up
glyphicon-down-up
glyphicon glyphicon-down-up
glyphicon-globe
glyphicon glyphicon-globe
glyphicon-wrench
glyphicon glyphicon-wrench
glyphicon-tasks
glyphicon glyphicon-tasks
glyphicon-filter
glyphicon glyphicon-filter
glyphicon-briefcase
glyphicon glyphicon-briefcase
glyphicon-fullscreen
glyphicon glyphicon-fullscreen
glyphicon-dashboard
glyphicon glyphicon-dashboard
glyphicon-paperclip
glyphicon glyphicon-paperclip
glyphicon-heart-empty
glyphicon glyphicon-heart-empty
glyphicon-link
glyphicon glyphicon-link
glyphicon-phone
glyphicon glyphicon-phone
glyphicon-pushpin
glyphicon glyphicon-pushpin
glyphicon-usd
glyphicon glyphicon-usd
glyphicon-gbp
glyphicon glyphicon-gbp
glyphicon-sort
glyphicon glyphicon-sort
glyphicon-alphabet
glyphicon glyphicon-alphabet
glyphicon-alphabet-alt
glyphicon glyphicon-alphabet-alt
glyphicon-sort-by-order
glyphicon glyphicon-sort-by-order
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-attributes
glyphicon glyphicon-sort-by-attributes
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-unchecked
glyphicon glyphicon-unchecked
glyphicon glyphicon-expand
glyphicon glyphicon-expand
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-collapse-up
glyphicon glyphicon-log-in
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-log-out
glyphicon glyphicon-new-window
glyphicon glyphicon-new-window
glyphicon glyphicon-record
glyphicon glyphicon-record
glyphicon glyphicon-save
glyphicon glyphicon-save
glyphicon glyphicon-open
glyphicon glyphicon-open
glyphicon glyphicon-saved
glyphicon glyphicon-saved
glyphicon glyphicon-import
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-export
glyphicon glyphicon-send
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-floppy-open
glyphicon glyphicon-credit-card
glyphicon glyphicon-credit-card
glyphicon glyphicon-transfer
glyphicon glyphicon-transfer
glyphicon glyphicon-cutlery
glyphicon glyphicon-cutlery
glyphicon glyphicon-header
glyphicon glyphicon-header
glyphicon glyphicon-compressed
glyphicon glyphicon-compressed
glyphicon glyphicon-earphone
glyphicon glyphicon-earphone
glyphicon glyphicon-phone-alt
glyphicon glyphicon-phone-alt
glyphicon glyphicon-tower
glyphicon glyphicon-tower
glyphicon glyphicon-stats
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-subtitles
glyphicon glyphicon-subtitles
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-cloud_download
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-tree-conifer
glyphicon glyphicon-tree-conifer
glyphicon glyphicon-tree-deciduous
glyphicon glyphicon-tree-deciduous
glyphicon glyphicon-cd
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-open-file
glyphicon glyphicon-level-up
glyphicon glyphicon-level-up
glyphicon glyphicon-copy
glyphicon glyphicon-copy
glyphicon glyphicon-paste
glyphicon glyphicon-paste
glyphicon glyphicon-alert
glyphicon glyphicon-alert
glyphicon glyphicon-equalizer
glyphicon glyphicon-equalizer
glyphicon glyphicon-king
glyphicon glyphicon-king
glyphicon glyphicon-queen
glyphicon glyphicon-queen
glyphicon glyphicon-pawn
glyphicon glyphicon-pawn
glyphicon glyphicon-bishop
glyphicon glyphicon-bishop
glyphicon glyphicon-knight
glyphicon glyphicon-knight
glyphicon glyphicon-baby-formula
glyphicon glyphicon-baby-formula
glyphicon glyphicon-tent
glyphicon glyphicon-tent
glyphicon glyphicon-blackboard
glyphicon glyphicon-blackboard
glyphicon glyphicon-bed
glyphicon glyphicon-bed
glyphicon glyphicon-apple
glyphicon glyphicon-apple
glyphicon glyphicon-erase
glyphicon glyphicon-erase
glyphicon glyphicon-hourglass
glyphicon glyphicon-hourglass
glyphicon glyphicon-lamp
glyphicon glyphicon-lamp
glyphicon glyphicon-duplicate
glyphicon glyphicon-duplicate
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-scissors
glyphicon glyphicon-scissors
glyphicon glyphicon-bitcoin
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-jpy
glyphicon glyphicon-ruble
glyphicon glyphicon-ruble
glyphicon glyphicon-rub
glyphicon glyphicon-rub
glyphicon glyphicon-scale
glyphicon glyphicon-scale
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly-tasted
glyphicon glyphicon-ice-lolly-tasted
glyphicon glyphicon-education
glyphicon glyphicon-education
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-option-menu-vertical
glyphicon glyphicon-modal-window
glyphicon glyphicon-modal-window
glyphicon glyphicon-oil
glyphicon glyphicon-oil
glyphicon glyphicon-grain
glyphicon glyphicon-grain
glyphicon glyphicon-sunglasses
glyphicon glyphicon-sunglasses
glyphicon glyphicon-text-size
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-color
glyphicon glyphicon-text-background
glyphicon glyphicon-text-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-object-align-right
glyphicon glyphicon-triangle-right
glyphicon glyphicon-triangle-right
glyphicon glyphicon-triangle-left
glyphicon glyphicon-triangle-left
glyphicon glyphicon-triangle-bottom
glyphicon glyphicon-triangle-bottom
glyphicon glyphicon-triangle-top
glyphicon glyphicon-triangle-top
glyphicon glyphicon-console
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu_left
glyphicon glyphicon-menu_left
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up
glyphicon glyphicon-menu-up

Utilização dos glyphicons

Para utilizar os glyphicons do Bootstrap, duas regras devem ser respeitadas:

  1. Não misturar os ícones com outros componentes;
  2. Utilizá-los apenas em elementos vazios.

Embora a adoção dos ícones faça sentido especialmente quando temos texto e ícone, como ocorre em um botão, as classes dos ícones não podem estar em um mesmo elemento que outras classes. Dessa forma, algo como o código a seguir, por exemplo, é incorreto e não trará o resultado esperado, como mostra a Figura 1.

<button class="btn btn-default glyphicon glyphicon-search">Buscar</button>
Botão com glyphicon definido de forma incorreta
Figura 1. Botão com glyphicons definido de forma incorreta

Embora, como podemos observar pela Figura 1, tenhamos o botão com um ícone e o texto, detalhes como o padding e a própria fonte do texto não estão da forma esperada.

Esses problemas recaem sobre as duas regras básicas que temos para o uso de glyphicons no Bootstrap. Ao quebrarmos essas regras, obtemos um botão que não é visualmente tão interessante quanto poderia ser.

O código ideal para esse caso corrige esses defeitos e é apresentado a seguir:


  <button class="btn btn-default">
  Buscar <span class="glyphicon glyphicon-search"></span>
  </button> 
  

Note que, agora, temos um elemento <button> apenas com suas classes padrão (btn btn-default). Dentro dele, por outro lado, temos o ícone, posicionado após o texto. Repare que esse ícone foi declarado em um novo elemento, <span>. Assim, os detalhes das classes do botão serão respeitados, trazendo o padding correto, bem como a fonte do texto. Além disso, há, também, mais controle sobre o local onde desejamos posicionar o ícone, uma vez que ele poderia ser inserido antes do texto sem qualquer problema. A Figura 2 mostra o resultado desse novo código.

Botão com glyphicon definido de forma correta
Figura 2. Botão com glyphicons definido de forma correta

Com isso, verificamos que a utilização dos glyphicons é relativamente simples, desde que suas regras sejam respeitadas. É importante ressaltar, também, que eles podem ser utilizados com qualquer elemento, e não apenas botões, por exemplo: é comum encontrarmos esses ícones em mensagens de erro, barras de navegação e formulários.