Como los usamos

Por motivos de rendimiento, los iconos requieren una class base y una class de icono individual. (Ejemplo: class='glyphicon glyphicon-ICONO')

Asegúrese de dejar un espacio entre el icono y el texto si así lo desea.

No lo mezcle con otros componentes

Las class de los iconos no deben ser mezcladas con otros componentes. No deben ser usadas junto a otras class en el mismo elemento. En su lugar, añada un <span> (o también <i>) anidado para aplicar las class de los iconos.

Usar solo en elementos vacios

Las class de iconos han de usarse en elementos que no contengan ningún texto o elemento secundario.

Cambiar la ruta de @icon-font-path y/o @icon-font-name

Bootstrap asume que la ruta correcta de la fuente es ../fonts/, relativa al archivo CSSs. Mover o cambiar el nombre de los ficheros significa la actualización de los CSS en alguna de las siguientes maneras:

  • Cambiar @icon-font-path y/o @icon-font-name las variables en los archivos LESS.
  • Utiliece la opción URL relativas en los archivos LESS.
  • Camibe las direcciones url() de los archivos CSS.

Puede utilizar las opciones que más se adecuen a su trabajo.

Iconos accesibles

Las versiones modernas de las tecnologías de asistencia dará a conocer el contenido generado por CSS, así como caracteres Unicode específicos. Para evitar la salida involuntaria y confuso en los lectores de pantalla (sobre todo cuando se utilizan los iconos puramente para la decoración), les ocultamos con el atributo aria-oculta='true'.

Si estás usando un icono para transmitir el significado (en lugar de sólo como un elemento decorativo), asegúrese de que este significado se transmite también a las tecnologías de asistencia - por ejemplo, incluye contenido adicional, oculta visualmente con el .sr-only class.

Si va a crear controles con ningún otro texto (como por ejemplo un <button> que sólo contiene un icono), siempre debe proporcionar contenido alternativo para identificar el propósito del control, por lo que tendrá sentido para los usuarios de las tecnologías de asistencia. En este caso, se puede añadir un atributo aria-label en el propio control.

Elige el tipo de elemento que contendrá el icono. Posteriormente pincha en Generador Glyphicons o Generador Icomoon para elegir el icono.
<i class="icon icon-joomla"></i>
<span aria-hidden="true" class="icon icon-joomla"></span>
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
.icon-joomla
.icon-chevron-up
.icon-uparrow
.icon-arrow-up
.icon-chevron-right
.icon-rightarrow
.icon-arrow-right
.icon-chevron-down
.icon-downarrow
.icon-arrow-down
.icon-chevron-left
.icon-leftarrow
.icon-arrow-left
.icon-arrow-first
.icon-arrow-last
.icon-arrow-up-2
.icon-arrow-right-2
.icon-arrow-down-2
.icon-arrow-left-2
.icon-arrow-up-3
.icon-arrow-right-3
.icon-arrow-down-3
.icon-arrow-left-3
.icon-menu-2
.icon-arrow-up-4
.icon-arrow-right-4
.icon-arrow-down-4
.icon-arrow-left-4
.icon-share
.icon-redo
.icon-undo
.icon-forward-2
.icon-backward-2
.icon-reply
.icon-unblock
.icon-refresh
.icon-redo-2
.icon-undo-2
.icon-move
.icon-expand
.icon-contract
.icon-expand-2
.icon-contract-2
.icon-play
.icon-pause
.icon-stop
.icon-previous
.icon-backward
.icon-next
.icon-forward
.icon-first
.icon-last
.icon-play-circle
.icon-pause-circle
.icon-stop-circle
.icon-backward-circle
.icon-forward-circle
.icon-loop
.icon-shuffle
.icon-search
.icon-zoom-in
.icon-zoom-out
.icon-apply
.icon-edit
.icon-pencil
.icon-pencil-2
.icon-brush
.icon-save-new
.icon-plus-2
.icon-ban-circle
.icon-minus-sign
.icon-minus-2
.icon-delete
.icon-remove
.icon-cancel-2
.icon-publish
.icon-save
.icon-ok
.icon-checkmark
.icon-new
.icon-plus
.icon-plus-circle
.icon-minus
.icon-not-ok
.icon-minus-circle
.icon-unpublish
.icon-cancel
.icon-cancel-circle
.icon-checkmark-2
.icon-checkmark-circle
.icon-info
.icon-info-2
.icon-info-circle
.icon-question
.icon-question-sign
.icon-help
.icon-question-2
.icon-question-circle
.icon-notification
.icon-notification-2
.icon-notification-circle
.icon-pending
.icon-warning
.icon-warning-2
.icon-warning-circle
.icon-checkbox-unchecked
.icon-checkin
.icon-checkbox
.icon-checkbox-checked
.icon-checkbox-partial
.icon-square
.icon-radio-unchecked
.icon-radio-checked
.icon-circle
.icon-signup
.icon-grid
.icon-grid-view
.icon-grid-2
.icon-grid-view-2
.icon-menu
.icon-list
.icon-list-view
.icon-list-2
.icon-menu-3
.icon-folder-open
.icon-folder
.icon-folder-close
.icon-folder-2
.icon-folder-plus
.icon-folder-minus
.icon-folder-3
.icon-folder-plus-2
.icon-folder-remove
.icon-file
.icon-file-2
.icon-file-add
.icon-file-plus
.icon-file-remove
.icon-file-minus
.icon-file-check
.icon-file-remove
.icon-save-copy
.icon-copy
.icon-stack
.icon-tree
.icon-tree-2
.icon-paragraph-left
.icon-paragraph-center
.icon-paragraph-right
.icon-paragraph-justify
.icon-screen
.icon-tablet
.icon-mobile
.icon-box-add
.icon-box-remove
.icon-download
.icon-upload
.icon-home
.icon-home-2
.icon-out-2
.icon-new-tab
.icon-out-3
.icon-new-tab-2
.icon-link
.icon-picture
.icon-image
.icon-pictures
.icon-images
.icon-palette
.icon-color-palette
.icon-camera
.icon-camera-2
.icon-video
.icon-play-2
.icon-video-2
.icon-youtube
.icon-music
.icon-user
.icon-users
.icon-vcard
.icon-address
.icon-share-alt
.icon-out
.icon-enter
.icon-exit
.icon-comment
.icon-comments
.icon-comments-2
.icon-quote
.icon-quotes-left
.icon-quote-2
.icon-quotes-right
.icon-quote-3
.icon-bubble-quote
.icon-phone
.icon-phone-2
.icon-envelope
.icon-mail
.icon-envelope-opened
.icon-mail-2
.icon-unarchive
.icon-drawer
.icon-archive
.icon-drawer-2
.icon-briefcase
.icon-tag
.icon-tag-2
.icon-tags
.icon-tags-2
.icon-options
.icon-cog
.icon-cogs
.icon-screwdriver
.icon-tools
.icon-wrench
.icon-equalizer
.icon-dashboard
.icon-switch
.icon-filter
.icon-purge
.icon-trash
.icon-checkedout
.icon-lock
.icon-locked
.icon-unlock
.icon-key
.icon-support
.icon-database
.icon-scissors
.icon-health
.icon-wand
.icon-eye-open
.icon-eye
.icon-eye-close
.icon-eye-blocked
.icon-eye-2
.icon-clock
.icon-compass
.icon-broadcast
.icon-connection
.icon-wifi
.icon-book
.icon-lightning
.icon-flash
.icon-print
.icon-printer
.icon-feed
.icon-calendar
.icon-calendar-2
.icon-calendar-3
.icon-pie
.icon-bars
.icon-chart
.icon-power-cord
.icon-cube
.icon-puzzle
.icon-attachment
.icon-paperclip
.icon-flag-2
.icon-lamp
.icon-pin
.icon-pushpin
.icon-location
.icon-shield
.icon-flag
.icon-flag-3
.icon-bookmark
.icon-bookmark-2
.icon-heart
.icon-heart-2
.icon-thumbs-up
.icon-thumbs-down
.icon-unfeatured
.icon-asterisk
.icon-star-empty
.icon-star-2
.icon-featured
.icon-default
.icon-star
.icon-smiley
.icon-smiley-happy
.icon-smiley-2
.icon-smiley-happy-2
.icon-smiley-sad
.icon-smiley-sad-2
.icon-smiley-neutral
.icon-smiley-neutral-2
.icon-cart
.icon-basket
.icon-credit
.icon-credit-2