From 72198a59c056857d93d35b5e3251b1baf8b5ab1c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 2 Nov 2012 01:20:06 -0700 Subject: removing glyphicons images, swapping in new icon font with new classes --- Makefile | 6 +- docs/assets/css/bootstrap.css | 701 +++++++++++---------- docs/assets/css/docs.css | 19 +- docs/assets/fonts/glyphiconshalflings-regular.eot | Bin 0 -> 33358 bytes docs/assets/fonts/glyphiconshalflings-regular.otf | Bin 0 -> 18116 bytes docs/assets/fonts/glyphiconshalflings-regular.svg | 175 +++++ docs/assets/fonts/glyphiconshalflings-regular.ttf | Bin 0 -> 32896 bytes docs/assets/fonts/glyphiconshalflings-regular.woff | Bin 0 -> 18944 bytes docs/assets/img/glyphicons-halflings-white.png | Bin 8777 -> 0 bytes docs/assets/img/glyphicons-halflings.png | Bin 12799 -> 0 bytes docs/base-css.html | 396 ++++++------ docs/templates/pages/base-css.mustache | 396 ++++++------ fonts/glyphiconshalflings-regular.eot | Bin 0 -> 33358 bytes fonts/glyphiconshalflings-regular.otf | Bin 0 -> 18116 bytes fonts/glyphiconshalflings-regular.svg | 175 +++++ fonts/glyphiconshalflings-regular.ttf | Bin 0 -> 32896 bytes fonts/glyphiconshalflings-regular.woff | Bin 0 -> 18944 bytes img/glyphicons-halflings-white.png | Bin 8777 -> 0 bytes img/glyphicons-halflings.png | Bin 12799 -> 0 bytes less/bootstrap.less | 2 +- less/buttons.less | 19 +- less/glyphicons.less | 199 ++++++ less/sprites.less | 193 ------ less/tests/buttons.html | 71 +++ less/variables.less | 2 +- 25 files changed, 1443 insertions(+), 911 deletions(-) create mode 100755 docs/assets/fonts/glyphiconshalflings-regular.eot create mode 100644 docs/assets/fonts/glyphiconshalflings-regular.otf create mode 100755 docs/assets/fonts/glyphiconshalflings-regular.svg create mode 100755 docs/assets/fonts/glyphiconshalflings-regular.ttf create mode 100755 docs/assets/fonts/glyphiconshalflings-regular.woff delete mode 100644 docs/assets/img/glyphicons-halflings-white.png delete mode 100644 docs/assets/img/glyphicons-halflings.png create mode 100755 fonts/glyphiconshalflings-regular.eot create mode 100644 fonts/glyphiconshalflings-regular.otf create mode 100755 fonts/glyphiconshalflings-regular.svg create mode 100755 fonts/glyphiconshalflings-regular.ttf create mode 100755 fonts/glyphiconshalflings-regular.woff delete mode 100644 img/glyphicons-halflings-white.png delete mode 100644 img/glyphicons-halflings.png create mode 100644 less/glyphicons.less delete mode 100644 less/sprites.less diff --git a/Makefile b/Makefile index 439f7ff1f..26297ad99 100644 --- a/Makefile +++ b/Makefile @@ -22,7 +22,7 @@ build: @recess --compile ${BOOTSTRAP_RESPONSIVE_LESS} > ${BOOTSTRAP_RESPONSIVE} @echo "Compiling LESS with Recess... ${CHECK} Done" @node docs/build - @cp img/* docs/assets/img/ + @cp fonts/* docs/assets/fonts/ @cp js/*.js docs/assets/js/ @cp js/tests/vendor/jquery.js docs/assets/js/ @echo "Compiling documentation... ${CHECK} Done" @@ -63,10 +63,10 @@ clean: # bootstrap: - mkdir -p bootstrap/img + mkdir -p bootstrap/fonts mkdir -p bootstrap/css mkdir -p bootstrap/js - cp img/* bootstrap/img/ + cp fonts/* bootstrap/fonts/ recess --compile ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.css recess --compress ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.min.css recess --compile ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.css diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 142df455a..52865cf0d 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -2153,598 +2153,657 @@ table th[class*="span"], background-color: #c4e3f3; } -[class^="icon-"], -[class*=" icon-"] { +@font-face { + font-family: 'Glyphicons Halflings'; + font-style: normal; + font-weight: normal; + src: url('../fonts/glyphiconshalflings-regular.eot'); + src: url('../fonts/glyphiconshalflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphiconshalflings-regular.woff') format('woff'), url('../fonts/glyphiconshalflings-regular.ttf') format('truetype'), url('../fonts/glyphiconshalflings-regular.svg#glyphicons_halflingsregular') format('svg'); +} + +[class^="glyphicon-"]:before { display: inline-block; - width: 14px; - height: 14px; - margin-top: 1px; - *margin-right: .3em; - line-height: 14px; - vertical-align: text-top; - background-image: url("../img/glyphicons-halflings.png"); - background-position: 14px 14px; - background-repeat: no-repeat; + font: normal 12px/1 'Glyphicons Halflings'; +} + +.glyphicon-glass:before { + content: "\e001"; +} + +.glyphicon-music:before { + content: "\e002"; +} + +.glyphicon-search:before { + content: "\e003"; +} + +.glyphicon-envelope:before { + content: "\2709"; +} + +.glyphicon-heart:before { + content: "\e005"; +} + +.glyphicon-star:before { + content: "\e006"; +} + +.glyphicon-star-empty:before { + content: "\e007"; +} + +.glyphicon-user:before { + content: "\e008"; } -/* White icons with optional class, or on hover/active states of certain elements */ +.glyphicon-film:before { + content: "\e009"; +} + +.glyphicon-th-large:before { + content: "\e010"; +} + +.glyphicon-th:before { + content: "\e011"; +} + +.glyphicon-th-list:before { + content: "\e012"; +} -.icon-white, -.nav-pills > .active > a > [class^="icon-"], -.nav-pills > .active > a > [class*=" icon-"], -.nav-list > .active > a > [class^="icon-"], -.nav-list > .active > a > [class*=" icon-"], -.navbar-inverse .nav > .active > a > [class^="icon-"], -.navbar-inverse .nav > .active > a > [class*=" icon-"], -.dropdown-menu > li > a:hover > [class^="icon-"], -.dropdown-menu > li > a:hover > [class*=" icon-"], -.dropdown-menu > .active > a > [class^="icon-"], -.dropdown-menu > .active > a > [class*=" icon-"], -.dropdown-submenu:hover > a > [class^="icon-"], -.dropdown-submenu:hover > a > [class*=" icon-"] { - background-image: url("../img/glyphicons-halflings-white.png"); +.glyphicon-ok:before { + content: "\e013"; } -.icon-glass { - background-position: 0 0; +.glyphicon-remove:before { + content: "\e014"; } -.icon-music { - background-position: -24px 0; +.glyphicon-zoom-in:before { + content: "\e015"; } -.icon-search { - background-position: -48px 0; +.glyphicon-zoom-out:before { + content: "\e016"; } -.icon-envelope { - background-position: -72px 0; +.glyphicon-off:before { + content: "\e017"; } -.icon-heart { - background-position: -96px 0; +.glyphicon-signal:before { + content: "\e018"; } -.icon-star { - background-position: -120px 0; +.glyphicon-cog:before { + content: "\e019"; } -.icon-star-empty { - background-position: -144px 0; +.glyphicon-trash:before { + content: "\e020"; } -.icon-user { - background-position: -168px 0; +.glyphicon-home:before { + content: "\e021"; } -.icon-film { - background-position: -192px 0; +.glyphicon-file:before { + content: "\e022"; } -.icon-th-large { - background-position: -216px 0; +.glyphicon-time:before { + content: "\e023"; } -.icon-th { - background-position: -240px 0; +.glyphicon-road:before { + content: "\e024"; } -.icon-th-list { - background-position: -264px 0; +.glyphicon-download-alt:before { + content: "\e025"; } -.icon-ok { - background-position: -288px 0; +.glyphicon-download:before { + content: "\e026"; } -.icon-remove { - background-position: -312px 0; +.glyphicon-upload:before { + content: "\e027"; } -.icon-zoom-in { - background-position: -336px 0; +.glyphicon-inbox:before { + content: "\e028"; } -.icon-zoom-out { - background-position: -360px 0; +.glyphicon-play-circle:before { + content: "\e029"; } -.icon-off { - background-position: -384px 0; +.glyphicon-repeat:before { + content: "\e030"; } -.icon-signal { - background-position: -408px 0; +.glyphicon-refresh:before { + content: "\e031"; } -.icon-cog { - background-position: -432px 0; +.glyphicon-list-alt:before { + content: "\e032"; } -.icon-trash { - background-position: -456px 0; +.glyphicon-lock:before { + content: "\e033"; } -.icon-home { - background-position: 0 -24px; +.glyphicon-flag:before { + content: "\e034"; } -.icon-file { - background-position: -24px -24px; +.glyphicon-headphones:before { + content: "\e035"; } -.icon-time { - background-position: -48px -24px; +.glyphicon-volume-off:before { + content: "\e036"; } -.icon-road { - background-position: -72px -24px; +.glyphicon-volume-down:before { + content: "\e037"; } -.icon-download-alt { - background-position: -96px -24px; +.glyphicon-volume-up:before { + content: "\e038"; } -.icon-download { - background-position: -120px -24px; +.glyphicon-qrcode:before { + content: "\e039"; } -.icon-upload { - background-position: -144px -24px; +.glyphicon-barcode:before { + content: "\e040"; } -.icon-inbox { - background-position: -168px -24px; +.glyphicon-tag:before { + content: "\e041"; } -.icon-play-circle { - background-position: -192px -24px; +.glyphicon-tags:before { + content: "\e042"; } -.icon-repeat { - background-position: -216px -24px; +.glyphicon-book:before { + content: "\e043"; } -.icon-refresh { - background-position: -240px -24px; +.glyphicon-bookmark:before { + content: "\e044"; } -.icon-list-alt { - background-position: -264px -24px; +.glyphicon-print:before { + content: "\e045"; } -.icon-lock { - background-position: -287px -24px; +.glyphicon-camera:before { + content: "\e046"; } -.icon-flag { - background-position: -312px -24px; +.glyphicon-font:before { + content: "\e047"; } -.icon-headphones { - background-position: -336px -24px; +.glyphicon-bold:before { + content: "\e048"; } -.icon-volume-off { - background-position: -360px -24px; +.glyphicon-italic:before { + content: "\e049"; } -.icon-volume-down { - background-position: -384px -24px; +.glyphicon-text-height:before { + content: "\e050"; } -.icon-volume-up { - background-position: -408px -24px; +.glyphicon-text-width:before { + content: "\e051"; } -.icon-qrcode { - background-position: -432px -24px; +.glyphicon-align-left:before { + content: "\e052"; } -.icon-barcode { - background-position: -456px -24px; +.glyphicon-align-center:before { + content: "\e053"; } -.icon-tag { - background-position: 0 -48px; +.glyphicon-align-right:before { + content: "\e054"; } -.icon-tags { - background-position: -25px -48px; +.glyphicon-align-justify:before { + content: "\e055"; } -.icon-book { - background-position: -48px -48px; +.glyphicon-list:before { + content: "\e056"; } -.icon-bookmark { - background-position: -72px -48px; +.glyphicon-indent-left:before { + content: "\e057"; } -.icon-print { - background-position: -96px -48px; +.glyphicon-indent-right:before { + content: "\e058"; } -.icon-camera { - background-position: -120px -48px; +.glyphicon-facetime-video:before { + content: "\e059"; } -.icon-font { - background-position: -144px -48px; +.glyphicon-picture:before { + content: "\e060"; } -.icon-bold { - background-position: -167px -48px; +.glyphicon-pencil:before { + content: "\270f"; } -.icon-italic { - background-position: -192px -48px; +.glyphicon-map-marker:before { + content: "\e062"; } -.icon-text-height { - background-position: -216px -48px; +.glyphicon-adjust:before { + content: "\e063"; } -.icon-text-width { - background-position: -240px -48px; +.glyphicon-tint:before { + content: "\e064"; } -.icon-align-left { - background-position: -264px -48px; +.glyphicon-edit:before { + content: "\e065"; } -.icon-align-center { - background-position: -288px -48px; +.glyphicon-share:before { + content: "\e066"; } -.icon-align-right { - background-position: -312px -48px; +.glyphicon-check:before { + content: "\e067"; } -.icon-align-justify { - background-position: -336px -48px; +.glyphicon-move:before { + content: "\e068"; } -.icon-list { - background-position: -360px -48px; +.glyphicon-step-backward:before { + content: "\e069"; } -.icon-indent-left { - background-position: -384px -48px; +.glyphicon-fast-backward:before { + content: "\e070"; } -.icon-indent-right { - background-position: -408px -48px; +.glyphicon-backward:before { + content: "\e071"; } -.icon-facetime-video { - background-position: -432px -48px; +.glyphicon-play:before { + content: "\e072"; } -.icon-picture { - background-position: -456px -48px; +.glyphicon-pause:before { + content: "\e073"; } -.icon-pencil { - background-position: 0 -72px; +.glyphicon-stop:before { + content: "\e074"; } -.icon-map-marker { - background-position: -24px -72px; +.glyphicon-forward:before { + content: "\e075"; } -.icon-adjust { - background-position: -48px -72px; +.glyphicon-fast-forward:before { + content: "\e076"; } -.icon-tint { - background-position: -72px -72px; +.glyphicon-step-forward:before { + content: "\e077"; } -.icon-edit { - background-position: -96px -72px; +.glyphicon-eject:before { + content: "\e078"; } -.icon-share { - background-position: -120px -72px; +.glyphicon-chevron-left:before { + content: "\e079"; } -.icon-check { - background-position: -144px -72px; +.glyphicon-chevron-right:before { + content: "\e080"; } -.icon-move { - background-position: -168px -72px; +.glyphicon-plus-sign:before { + content: "\e081"; } -.icon-step-backward { - background-position: -192px -72px; +.glyphicon-minus-sign:before { + content: "\e082"; } -.icon-fast-backward { - background-position: -216px -72px; +.glyphicon-remove-sign:before { + content: "\e083"; } -.icon-backward { - background-position: -240px -72px; +.glyphicon-ok-sign:before { + content: "\e084"; } -.icon-play { - background-position: -264px -72px; +.glyphicon-question-sign:before { + content: "\e085"; } -.icon-pause { - background-position: -288px -72px; +.glyphicon-info-sign:before { + content: "\e086"; } -.icon-stop { - background-position: -312px -72px; +.glyphicon-screenshot:before { + content: "\e087"; } -.icon-forward { - background-position: -336px -72px; +.glyphicon-remove-circle:before { + content: "\e088"; } -.icon-fast-forward { - background-position: -360px -72px; +.glyphicon-ok-circle:before { + content: "\e089"; } -.icon-step-forward { - background-position: -384px -72px; +.glyphicon-ban-circle:before { + content: "\e090"; } -.icon-eject { - background-position: -408px -72px; +.glyphicon-arrow-left:before { + content: "\e091"; } -.icon-chevron-left { - background-position: -432px -72px; +.glyphicon-arrow-right:before { + content: "\e092"; } -.icon-chevron-right { - background-position: -456px -72px; +.glyphicon-arrow-up:before { + content: "\e093"; } -.icon-plus-sign { - background-position: 0 -96px; +.glyphicon-arrow-down:before { + content: "\e094"; } -.icon-minus-sign { - background-position: -24px -96px; +.glyphicon-share-alt:before { + content: "\e095"; } -.icon-remove-sign { - background-position: -48px -96px; +.glyphicon-resize-full:before { + content: "\e096"; } -.icon-ok-sign { - background-position: -72px -96px; +.glyphicon-resize-small:before { + content: "\e097"; } -.icon-question-sign { - background-position: -96px -96px; +.glyphicon-plus:before { + content: "\002b"; } -.icon-info-sign { - background-position: -120px -96px; +.glyphicon-minus:before { + content: "\2212"; } -.icon-screenshot { - background-position: -144px -96px; +.glyphicon-asterisk:before { + content: "\002a"; } -.icon-remove-circle { - background-position: -168px -96px; +.glyphicon-exclamation-sign:before { + content: "\e101"; } -.icon-ok-circle { - background-position: -192px -96px; +.glyphicon-gift:before { + content: "\e102"; } -.icon-ban-circle { - background-position: -216px -96px; +.glyphicon-leaf:before { + content: "\e103"; } -.icon-arrow-left { - background-position: -240px -96px; +.glyphicon-fire:before { + content: "\e104"; } -.icon-arrow-right { - background-position: -264px -96px; +.glyphicon-eye-open:before { + content: "\e105"; } -.icon-arrow-up { - background-position: -289px -96px; +.glyphicon-eye-close:before { + content: "\e106"; } -.icon-arrow-down { - background-position: -312px -96px; +.glyphicon-warning-sign:before { + content: "\e107"; } -.icon-share-alt { - background-position: -336px -96px; +.glyphicon-plane:before { + content: "\e108"; } -.icon-resize-full { - background-position: -360px -96px; +.glyphicon-calendar:before { + content: "\e109"; } -.icon-resize-small { - background-position: -384px -96px; +.glyphicon-random:before { + content: "\e110"; } -.icon-plus { - background-position: -408px -96px; +.glyphicon-comment:before { + content: "\e111"; } -.icon-minus { - background-position: -433px -96px; +.glyphicon-magnet:before { + content: "\e112"; } -.icon-asterisk { - background-position: -456px -96px; +.glyphicon-chevron-up:before { + content: "\e113"; } -.icon-exclamation-sign { - background-position: 0 -120px; +.glyphicon-chevron-down:before { + content: "\e114"; } -.icon-gift { - background-position: -24px -120px; +.glyphicon-retweet:before { + content: "\e115"; } -.icon-leaf { - background-position: -48px -120px; +.glyphicon-shopping-cart:before { + content: "\e116"; } -.icon-fire { - background-position: -72px -120px; +.glyphicon-folder-close:before { + content: "\e117"; } -.icon-eye-open { - background-position: -96px -120px; +.glyphicon-folder-open:before { + content: "\e118"; } -.icon-eye-close { - background-position: -120px -120px; +.glyphicon-resize-vertical:before { + content: "\e119"; } -.icon-warning-sign { - background-position: -144px -120px; +.glyphicon-resize-horizontal:before { + content: "\e120"; } -.icon-plane { - background-position: -168px -120px; +.glyphicon-hdd:before { + content: "\e121"; } -.icon-calendar { - background-position: -192px -120px; +.glyphicon-bullhorn:before { + content: "\e122"; } -.icon-random { - width: 16px; - background-position: -216px -120px; +.glyphicon-bell:before { + content: "\e123"; } -.icon-comment { - background-position: -240px -120px; +.glyphicon-certificate:before { + content: "\e124"; } -.icon-magnet { - background-position: -264px -120px; +.glyphicon-thumbs-up:before { + content: "\e125"; } -.icon-chevron-up { - background-position: -288px -120px; +.glyphicon-thumbs-down:before { + content: "\e126"; } -.icon-chevron-down { - background-position: -313px -119px; +.glyphicon-hand-right:before { + content: "\e127"; } -.icon-retweet { - background-position: -336px -120px; +.glyphicon-hand-left:before { + content: "\e128"; } -.icon-shopping-cart { - background-position: -360px -120px; +.glyphicon-hand-up:before { + content: "\e129"; } -.icon-folder-close { - background-position: -384px -120px; +.glyphicon-hand-down:before { + content: "\e130"; } -.icon-folder-open { - width: 16px; - background-position: -408px -120px; +.glyphicon-circle-arrow-right:before { + content: "\e131"; } -.icon-resize-vertical { - background-position: -432px -119px; +.glyphicon-circle-arrow-left:before { + content: "\e132"; } -.icon-resize-horizontal { - background-position: -456px -118px; +.glyphicon-circle-arrow-up:before { + content: "\e133"; } -.icon-hdd { - background-position: 0 -144px; +.glyphicon-circle-arrow-down:before { + content: "\e134"; } -.icon-bullhorn { - background-position: -24px -144px; +.glyphicon-globe:before { + content: "\e135"; } -.icon-bell { - background-position: -48px -144px; +.glyphicon-wrench:before { + content: "\e136"; } -.icon-certificate { - background-position: -72px -144px; +.glyphicon-tasks:before { + content: "\e137"; } -.icon-thumbs-up { - background-position: -96px -144px; +.glyphicon-filter:before { + content: "\e138"; } -.icon-thumbs-down { - background-position: -120px -144px; +.glyphicon-briefcase:before { + content: "\e139"; } -.icon-hand-right { - background-position: -144px -144px; +.glyphicon-fullscreen:before { + content: "\e140"; } -.icon-hand-left { - background-position: -168px -144px; +.glyphicon-dashboard:before { + content: "\e141"; } -.icon-hand-up { - background-position: -192px -144px; +.glyphicon-paperclip:before { + content: "\e142"; } -.icon-hand-down { - background-position: -216px -144px; +.glyphicon-heart-empty:before { + content: "\e143"; } -.icon-circle-arrow-right { - background-position: -240px -144px; +.glyphicon-link:before { + content: "\e144"; } -.icon-circle-arrow-left { - background-position: -264px -144px; +.glyphicon-phone:before { + content: "\e145"; } -.icon-circle-arrow-up { - background-position: -288px -144px; +.glyphicon-pushpin:before { + content: "\e146"; } -.icon-circle-arrow-down { - background-position: -312px -144px; +.glyphicon-euro:before { + content: "\20ac"; } -.icon-globe { - background-position: -336px -144px; +.glyphicon-usd:before { + content: "\e148"; } -.icon-wrench { - background-position: -360px -144px; +.glyphicon-gbp:before { + content: "\e149"; } -.icon-tasks { - background-position: -384px -144px; +.glyphicon-sort:before { + content: "\e150"; } -.icon-filter { - background-position: -408px -144px; +.glyphicon-sort-by-alphabet:before { + content: "\e151"; } -.icon-briefcase { - background-position: -432px -144px; +.glyphicon-sort-by-alphabet-alt:before { + content: "\e152"; } -.icon-fullscreen { - background-position: -456px -144px; +.glyphicon-sort-by-order:before { + content: "\e153"; +} + +.glyphicon-sort-by-order-alt:before { + content: "\e154"; +} + +.glyphicon-sort-by-attributes:before { + content: "\e155"; +} + +.glyphicon-sort-by-attributes-alt:before { + content: "\e156"; +} + +.glyphicon-unchecked:before { + content: "\e157"; +} + +.glyphicon-expand:before { + content: "\e158"; +} + +.glyphicon-collapse:before { + content: "\e159"; +} + +.glyphicon-collapse-top:before { + content: "\e160"; } .dropup, @@ -3162,11 +3221,6 @@ button.close { border-radius: 6px; } -.btn-large [class^="icon-"], -.btn-large [class*=" icon-"] { - margin-top: 2px; -} - .btn-small { padding: 2px 10px; font-size: 11.9px; @@ -3175,19 +3229,26 @@ button.close { border-radius: 3px; } -.btn-small [class^="icon-"], -.btn-small [class*=" icon-"] { - margin-top: 0; -} - .btn-mini { - padding: 1px 6px; + padding: 0 6px; font-size: 10.5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } +.btn-large [class^="glyphicon-"]::before { + font-size: 14px; +} + +.btn-small [class^="glyphicon-"]::before { + font-size: 10px; +} + +.btn-mini [class^="glyphicon-"]::before { + font-size: 9px; +} + .btn-block { display: block; width: 100%; @@ -4901,7 +4962,7 @@ input[type="submit"].btn.btn-mini { .pagination-mini ul > li > a, .pagination-mini ul > li > span { - padding: 1px 6px; + padding: 0 6px; font-size: 10.5px; } diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 60782ecea..eaa28915d 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -528,7 +528,11 @@ h2 + .row { width: 25%; line-height: 25px; } -.the-icons i:hover { +.the-icons [class^="glyphicon-"] { + vertical-align: middle; + margin-right: 3px; +} +.the-icons li:hover [class^="glyphicon-"] { background-color: rgba(255,0,0,.25); } @@ -783,21 +787,22 @@ form.bs-docs-example { box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); } /* Chevrons */ -.bs-docs-sidenav .icon-chevron-right { +.bs-docs-sidenav .glyphicon-chevron-right { float: right; - margin-top: 2px; + margin-top: -2px; margin-right: -6px; opacity: .25; + color: #000; } .bs-docs-sidenav > li > a:hover { background-color: #f5f5f5; } -.bs-docs-sidenav a:hover .icon-chevron-right { +.bs-docs-sidenav a:hover .glyphicon-chevron-right { opacity: .5; } -.bs-docs-sidenav .active .icon-chevron-right, -.bs-docs-sidenav .active a:hover .icon-chevron-right { - background-image: url(../img/glyphicons-halflings-white.png); +.bs-docs-sidenav .active .glyphicon-chevron-right, +.bs-docs-sidenav .active a:hover .glyphicon-chevron-right { + color: #fff; opacity: 1; } .bs-docs-sidenav.affix { diff --git a/docs/assets/fonts/glyphiconshalflings-regular.eot b/docs/assets/fonts/glyphiconshalflings-regular.eot new file mode 100755 index 000000000..bd59ccd2d Binary files /dev/null and b/docs/assets/fonts/glyphiconshalflings-regular.eot differ diff --git a/docs/assets/fonts/glyphiconshalflings-regular.otf b/docs/assets/fonts/glyphiconshalflings-regular.otf new file mode 100644 index 000000000..b058f1cd1 Binary files /dev/null and b/docs/assets/fonts/glyphiconshalflings-regular.otf differ diff --git a/docs/assets/fonts/glyphiconshalflings-regular.svg b/docs/assets/fonts/glyphiconshalflings-regular.svg new file mode 100755 index 000000000..0fb458735 --- /dev/null +++ b/docs/assets/fonts/glyphiconshalflings-regular.svg @@ -0,0 +1,175 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/assets/fonts/glyphiconshalflings-regular.ttf b/docs/assets/fonts/glyphiconshalflings-regular.ttf new file mode 100755 index 000000000..c63c068fe Binary files /dev/null and b/docs/assets/fonts/glyphiconshalflings-regular.ttf differ diff --git a/docs/assets/fonts/glyphiconshalflings-regular.woff b/docs/assets/fonts/glyphiconshalflings-regular.woff new file mode 100755 index 000000000..4c778ffdc Binary files /dev/null and b/docs/assets/fonts/glyphiconshalflings-regular.woff differ diff --git a/docs/assets/img/glyphicons-halflings-white.png b/docs/assets/img/glyphicons-halflings-white.png deleted file mode 100644 index 3bf6484a2..000000000 Binary files a/docs/assets/img/glyphicons-halflings-white.png and /dev/null differ diff --git a/docs/assets/img/glyphicons-halflings.png b/docs/assets/img/glyphicons-halflings.png deleted file mode 100644 index a99699932..000000000 Binary files a/docs/assets/img/glyphicons-halflings.png and /dev/null differ diff --git a/docs/base-css.html b/docs/base-css.html index 4d27a6d69..d2ba3f133 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -86,13 +86,13 @@
@@ -1773,177 +1773,197 @@ For example, <code><section></code> should be wrapped as inlin ================================================== -->
-

Icons by Glyphicons

+

Icons font by Glyphicons

-

Icon glyphs

-

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

+

Included glyphs

+

Bootstrap comes with all 160 of Glyphicons Halflings set, all available in font formats for easy coloring, sizing, and placement.

+
    -
  • icon-glass
    • -
  • icon-music
    • -
  • icon-search
    • -
  • icon-envelope
    • -
  • icon-heart
    • -
  • icon-star
    • -
  • icon-star-empty
    • -
  • icon-user
    • -
  • icon-film
    • -
  • icon-th-large
    • -
  • icon-th
    • -
  • icon-th-list
    • -
  • icon-ok
    • -
  • icon-remove
    • -
  • icon-zoom-in
    • -
  • icon-zoom-out
    • -
  • icon-off
    • -
  • icon-signal
    • -
  • icon-cog
    • -
  • icon-trash
    • -
  • icon-home
    • -
  • icon-file
    • -
  • icon-time
    • -
  • icon-road
    • -
  • icon-download-alt
    • -
  • icon-download
    • -
  • icon-upload
    • -
  • icon-inbox
    • - -
  • icon-play-circle
    • -
  • icon-repeat
    • -
  • icon-refresh
    • -
  • icon-list-alt
    • -
  • icon-lock
    • -
  • icon-flag
    • -
  • icon-headphones
    • -
  • icon-volume-off
    • -
  • icon-volume-down
    • -
  • icon-volume-up
    • -
  • icon-qrcode
    • -
  • icon-barcode
    • -
  • icon-tag
    • -
  • icon-tags
    • -
  • icon-book
    • -
  • icon-bookmark
    • -
  • icon-print
    • -
  • icon-camera
    • -
  • icon-font
    • -
  • icon-bold
    • -
  • icon-italic
    • -
  • icon-text-height
    • -
  • icon-text-width
    • -
  • icon-align-left
    • -
  • icon-align-center
    • -
  • icon-align-right
    • -
  • icon-align-justify
    • -
  • icon-list
    • - -
  • icon-indent-left
    • -
  • icon-indent-right
    • -
  • icon-facetime-video
    • -
  • icon-picture
    • -
  • icon-pencil
    • -
  • icon-map-marker
    • -
  • icon-adjust
    • -
  • icon-tint
    • -
  • icon-edit
    • -
  • icon-share
    • -
  • icon-check
    • -
  • icon-move
    • -
  • icon-step-backward
    • -
  • icon-fast-backward
    • -
  • icon-backward
    • -
  • icon-play
    • -
  • icon-pause
    • -
  • icon-stop
    • -
  • icon-forward
    • -
  • icon-fast-forward
    • -
  • icon-step-forward
    • -
  • icon-eject
    • -
  • icon-chevron-left
    • -
  • icon-chevron-right
    • -
  • icon-plus-sign
    • -
  • icon-minus-sign
    • -
  • icon-remove-sign
    • -
  • icon-ok-sign
    • - -
  • icon-question-sign
    • -
  • icon-info-sign
    • -
  • icon-screenshot
    • -
  • icon-remove-circle
    • -
  • icon-ok-circle
    • -
  • icon-ban-circle
    • -
  • icon-arrow-left
    • -
  • icon-arrow-right
    • -
  • icon-arrow-up
    • -
  • icon-arrow-down
    • -
  • icon-share-alt
    • -
  • icon-resize-full
    • -
  • icon-resize-small
    • -
  • icon-plus
    • -
  • icon-minus
    • -
  • icon-asterisk
    • -
  • icon-exclamation-sign
    • -
  • icon-gift
    • -
  • icon-leaf
    • -
  • icon-fire
    • -
  • icon-eye-open
    • -
  • icon-eye-close
    • -
  • icon-warning-sign
    • -
  • icon-plane
    • -
  • icon-calendar
    • -
  • icon-random
    • -
  • icon-comment
    • -
  • icon-magnet
    • - -
  • icon-chevron-up
    • -
  • icon-chevron-down
    • -
  • icon-retweet
    • -
  • icon-shopping-cart
    • -
  • icon-folder-close
    • -
  • icon-folder-open
    • -
  • icon-resize-vertical
    • -
  • icon-resize-horizontal
    • -
  • icon-hdd
    • -
  • icon-bullhorn
    • -
  • icon-bell
    • -
  • icon-certificate
    • -
  • icon-thumbs-up
    • -
  • icon-thumbs-down
    • -
  • icon-hand-right
    • -
  • icon-hand-left
    • -
  • icon-hand-up
    • -
  • icon-hand-down
    • -
  • icon-circle-arrow-right
    • -
  • icon-circle-arrow-left
    • -
  • icon-circle-arrow-up
    • -
  • icon-circle-arrow-down
    • -
  • icon-globe
    • -
  • icon-wrench
    • -
  • icon-tasks
    • -
  • icon-filter
    • -
  • icon-briefcase
    • -
  • icon-fullscreen
    • +
  • glyphicon-glass
    • +
  • glyphicon-music
    • +
  • glyphicon-search
    • +
  • glyphicon-envelope
    • +
  • glyphicon-heart
    • +
  • glyphicon-star
    • +
  • glyphicon-star-empty
    • +
  • glyphicon-user
    • +
  • glyphicon-film
    • +
  • glyphicon-th-large
    • +
  • glyphicon-th
    • +
  • glyphicon-th-list
    • +
  • glyphicon-ok
    • +
  • glyphicon-remove
    • +
  • glyphicon-zoom-in
    • +
  • glyphicon-zoom-out
    • +
  • glyphicon-off
    • +
  • glyphicon-signal
    • +
  • glyphicon-cog
    • +
  • glyphicon-trash
    • +
  • glyphicon-home
    • +
  • glyphicon-file
    • +
  • glyphicon-time
    • +
  • glyphicon-road
    • +
  • glyphicon-download-alt
    • +
  • glyphicon-download
    • +
  • glyphicon-upload
    • +
  • glyphicon-inbox
    • + +
  • glyphicon-play-circle
    • +
  • glyphicon-repeat
    • +
  • glyphicon-refresh
    • +
  • glyphicon-list-alt
    • +
  • glyphicon-lock
    • +
  • glyphicon-flag
    • +
  • glyphicon-headphones
    • +
  • glyphicon-volume-off
    • +
  • glyphicon-volume-down
    • +
  • glyphicon-volume-up
    • +
  • glyphicon-qrcode
    • +
  • glyphicon-barcode
    • +
  • glyphicon-tag
    • +
  • glyphicon-tags
    • +
  • glyphicon-book
    • +
  • glyphicon-bookmark
    • +
  • glyphicon-print
    • +
  • glyphicon-camera
    • +
  • glyphicon-font
    • +
  • glyphicon-bold
    • +
  • glyphicon-italic
    • +
  • glyphicon-text-height
    • +
  • glyphicon-text-width
    • +
  • glyphicon-align-left
    • +
  • glyphicon-align-center
    • +
  • glyphicon-align-right
    • +
  • glyphicon-align-justify
    • +
  • glyphicon-list
    • + +
  • glyphicon-indent-left
    • +
  • glyphicon-indent-right
    • +
  • glyphicon-facetime-video
    • +
  • glyphicon-picture
    • +
  • glyphicon-pencil
    • +
  • glyphicon-map-marker
    • +
  • glyphicon-adjust
    • +
  • glyphicon-tint
    • +
  • glyphicon-edit
    • +
  • glyphicon-share
    • +
  • glyphicon-check
    • +
  • glyphicon-move
    • +
  • glyphicon-step-backward
    • +
  • glyphicon-fast-backward
    • +
  • glyphicon-backward
    • +
  • glyphicon-play
    • +
  • glyphicon-pause
    • +
  • glyphicon-stop
    • +
  • glyphicon-forward
    • +
  • glyphicon-fast-forward
    • +
  • glyphicon-step-forward
    • +
  • glyphicon-eject
    • +
  • glyphicon-chevron-left
    • +
  • glyphicon-chevron-right
    • +
  • glyphicon-plus-sign
    • +
  • glyphicon-minus-sign
    • +
  • glyphicon-remove-sign
    • +
  • glyphicon-ok-sign
    • + +
  • glyphicon-question-sign
    • +
  • glyphicon-info-sign
    • +
  • glyphicon-screenshot
    • +
  • glyphicon-remove-circle
    • +
  • glyphicon-ok-circle
    • +
  • glyphicon-ban-circle
    • +
  • glyphicon-arrow-left
    • +
  • glyphicon-arrow-right
    • +
  • glyphicon-arrow-up
    • +
  • glyphicon-arrow-down
    • +
  • glyphicon-share-alt
    • +
  • glyphicon-resize-full
    • +
  • glyphicon-resize-small
    • +
  • glyphicon-plus
    • +
  • glyphicon-minus
    • +
  • glyphicon-asterisk
    • +
  • glyphicon-exclamation-sign
    • +
  • glyphicon-gift
    • +
  • glyphicon-leaf
    • +
  • glyphicon-fire
    • +
  • glyphicon-eye-open
    • +
  • glyphicon-eye-close
    • +
  • glyphicon-warning-sign
    • +
  • glyphicon-plane
    • +
  • glyphicon-calendar
    • +
  • glyphicon-random
    • +
  • glyphicon-comment
    • +
  • glyphicon-magnet
    • + +
  • glyphicon-chevron-up
    • +
  • glyphicon-chevron-down
    • +
  • glyphicon-retweet
    • +
  • glyphicon-shopping-cart
    • +
  • glyphicon-folder-close
    • +
  • glyphicon-folder-open
    • +
  • glyphicon-resize-vertical
    • +
  • glyphicon-resize-horizontal
    • +
  • glyphicon-hdd
    • +
  • glyphicon-bullhorn
    • +
  • glyphicon-bell
    • +
  • glyphicon-certificate
    • +
  • glyphicon-thumbs-up
    • +
  • glyphicon-thumbs-down
    • +
  • glyphicon-hand-right
    • +
  • glyphicon-hand-left
    • +
  • glyphicon-hand-up
    • +
  • glyphicon-hand-down
    • +
  • glyphicon-circle-arrow-right
    • +
  • glyphicon-circle-arrow-left
    • +
  • glyphicon-circle-arrow-up
    • +
  • glyphicon-circle-arrow-down
    • +
  • glyphicon-globe
    • +
  • glyphicon-wrench
    • +
  • glyphicon-tasks
    • +
  • glyphicon-filter
    • +
  • glyphicon-briefcase
    • +
  • glyphicon-fullscreen
    • + +
  • glyphicon-dashboard
    • +
  • glyphicon-paperclip
    • +
  • glyphicon-heart-empty
    • +
  • glyphicon-link
    • +
  • glyphicon-phone
    • +
  • glyphicon-pushpin
    • +
  • glyphicon-euro
    • +
  • glyphicon-usd
    • +
  • glyphicon-gbp
    • +
  • glyphicon-sort
    • +
  • glyphicon-sort-by-alphabet
    • +
  • glyphicon-sort-by-alphabet-alt
    • +
  • glyphicon-sort-by-order
    • +
  • glyphicon-sort-by-order-alt
    • +
  • glyphicon-sort-by-attributes
    • +
  • glyphicon-sort-by-attributes-alt
    • +
  • glyphicon-unchecked
    • +
  • glyphicon-expand
    • +
  • glyphicon-collapse
    • +
  • glyphicon-collapse-top
    • +

Glyphicons attribution

-

Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

+

Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creator have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

How to use

-

All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

-
-<i class="icon-search"></i>
-
-

There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.

+

Add the appropriate class to any inline element. All icon classes are prefixed with glyphicon- for easy styling. To use, place the following code just about anywhere:

-<i class="icon-search icon-white"></i>
+<i class="glyphicon-search"></i>
+

Want to change the icon color? Just change the color of the parent element.

Heads up! - When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing. + When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.

@@ -1959,10 +1979,10 @@ For example, <code><section></code> should be wrapped as inlin
- - - - + + + +
@@ -1970,10 +1990,10 @@ For example, <code><section></code> should be wrapped as inlin <div class="btn-toolbar"> <div class="btn-group"> - <a class="btn" href="#"><i class="icon-align-left"></i></a> - <a class="btn" href="#"><i class="icon-align-center"></i></a> - <a class="btn" href="#"><i class="icon-align-right"></i></a> - <a class="btn" href="#"><i class="icon-align-justify"></i></a> + <a class="btn" href="#"><i class="glyphicon-align-left"></i></a> + <a class="btn" href="#"><i class="glyphicon-align-center"></i></a> + <a class="btn" href="#"><i class="glyphicon-align-right"></i></a> + <a class="btn" href="#"><i class="glyphicon-align-justify"></i></a> </div> </div> @@ -1981,12 +2001,12 @@ For example, <code><section></code> should be wrapped as inlin
Dropdown in a button group
- User + User @@ -1994,12 +2014,12 @@ For example, <code><section></code> should be wrapped as inlin 
 <div class="btn-group">
-  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
+  <a class="btn btn-primary" href="#"><i class="glyphicon-user icon-white"></i> User</a>
   <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
   <ul class="dropdown-menu">
-    <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
-    <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
-    <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
+    <li><a href="#"><i class="glyphicon-pencil"></i> Edit</a></li>
+    <li><a href="#"><i class="glyphicon-trash"></i> Delete</a></li>
+    <li><a href="#"><i class="glyphicon-ban-circle"></i> Ban</a></li>
     <li class="divider"></li>
     <li><a href="#"><i class="i"></i> Make admin</a></li>
   </ul>
@@ -2008,10 +2028,10 @@ For example, <code><section></code> should be wrapped as inlin
 
           
Small button

           

-            
+            
           

 
-<a class="btn btn-small" href="#"><i class="icon-star"></i></a>
+<a class="btn btn-small" href="#"><i class="glyphicon-star"></i></a>
 

 
 
@@ -2019,18 +2039,18 @@ For example, <code><section></code> should be wrapped as inlin
           

             

               
             

           

 
 <ul class="nav nav-list">
-  <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
-  <li><a href="#"><i class="icon-book"></i> Library</a></li>
-  <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
+  <li class="active"><a href="#"><i class="glyphicon-home icon-white"></i> Home</a></li>
+  <li><a href="#"><i class="glyphicon-book"></i> Library</a></li>
+  <li><a href="#"><i class="glyphicon-pencil"></i> Applications</a></li>
   <li><a href="#"><i class="i"></i> Misc</a></li>
 </ul>
 

@@ -2041,7 +2061,7 @@ For example, <code><section></code> should be wrapped as inlin
               
               

                 

-                  
+
@@ -2051,7 +2071,7 @@ For example, <code><section></code> should be wrapped as inlin <label class="control-label" for="inputIcon">Email address</label> <div class="controls"> <div class="input-prepend"> - <span class="add-on"><i class="icon-envelope"></i></span> + <span class="add-on"><i class="glyphicon-envelope"></i></span> <input class="span2" id="inputIcon" type="text"> </div> </div> diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index e0a028068..ed4263582 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -15,13 +15,13 @@
@@ -1710,177 +1710,197 @@ ================================================== -->
-

{{_i}}Icons by Glyphicons{{/i}}

+

{{_i}}Icons font by Glyphicons{{/i}}

-

{{_i}}Icon glyphs{{/i}}

-

{{_i}}140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.{{/i}}

+

{{_i}}Included glyphs{{/i}}

+

{{_i}}Bootstrap comes with all 160 of Glyphicons Halflings set, all available in font formats for easy coloring, sizing, and placement.{{/i}}

+
    -
  • icon-glass
    • -
  • icon-music
    • -
  • icon-search
    • -
  • icon-envelope
    • -
  • icon-heart
    • -
  • icon-star
    • -
  • icon-star-empty
    • -
  • icon-user
    • -
  • icon-film
    • -
  • icon-th-large
    • -
  • icon-th
    • -
  • icon-th-list
    • -
  • icon-ok
    • -
  • icon-remove
    • -
  • icon-zoom-in
    • -
  • icon-zoom-out
    • -
  • icon-off
    • -
  • icon-signal
    • -
  • icon-cog
    • -
  • icon-trash
    • -
  • icon-home
    • -
  • icon-file
    • -
  • icon-time
    • -
  • icon-road
    • -
  • icon-download-alt
    • -
  • icon-download
    • -
  • icon-upload
    • -
  • icon-inbox
    • - -
  • icon-play-circle
    • -
  • icon-repeat
    • -
  • icon-refresh
    • -
  • icon-list-alt
    • -
  • icon-lock
    • -
  • icon-flag
    • -
  • icon-headphones
    • -
  • icon-volume-off
    • -
  • icon-volume-down
    • -
  • icon-volume-up
    • -
  • icon-qrcode
    • -
  • icon-barcode
    • -
  • icon-tag
    • -
  • icon-tags
    • -
  • icon-book
    • -
  • icon-bookmark
    • -
  • icon-print
    • -
  • icon-camera
    • -
  • icon-font
    • -
  • icon-bold
    • -
  • icon-italic
    • -
  • icon-text-height
    • -
  • icon-text-width
    • -
  • icon-align-left
    • -
  • icon-align-center
    • -
  • icon-align-right
    • -
  • icon-align-justify
    • -
  • icon-list
    • - -
  • icon-indent-left
    • -
  • icon-indent-right
    • -
  • icon-facetime-video
    • -
  • icon-picture
    • -
  • icon-pencil
    • -
  • icon-map-marker
    • -
  • icon-adjust
    • -
  • icon-tint
    • -
  • icon-edit
    • -
  • icon-share
    • -
  • icon-check
    • -
  • icon-move
    • -
  • icon-step-backward
    • -
  • icon-fast-backward
    • -
  • icon-backward
    • -
  • icon-play
    • -
  • icon-pause
    • -
  • icon-stop
    • -
  • icon-forward
    • -
  • icon-fast-forward
    • -
  • icon-step-forward
    • -
  • icon-eject
    • -
  • icon-chevron-left
    • -
  • icon-chevron-right
    • -
  • icon-plus-sign
    • -
  • icon-minus-sign
    • -
  • icon-remove-sign
    • -
  • icon-ok-sign
    • - -
  • icon-question-sign
    • -
  • icon-info-sign
    • -
  • icon-screenshot
    • -
  • icon-remove-circle
    • -
  • icon-ok-circle
    • -
  • icon-ban-circle
    • -
  • icon-arrow-left
    • -
  • icon-arrow-right
    • -
  • icon-arrow-up
    • -
  • icon-arrow-down
    • -
  • icon-share-alt
    • -
  • icon-resize-full
    • -
  • icon-resize-small
    • -
  • icon-plus
    • -
  • icon-minus
    • -
  • icon-asterisk
    • -
  • icon-exclamation-sign
    • -
  • icon-gift
    • -
  • icon-leaf
    • -
  • icon-fire
    • -
  • icon-eye-open
    • -
  • icon-eye-close
    • -
  • icon-warning-sign
    • -
  • icon-plane
    • -
  • icon-calendar
    • -
  • icon-random
    • -
  • icon-comment
    • -
  • icon-magnet
    • - -
  • icon-chevron-up
    • -
  • icon-chevron-down
    • -
  • icon-retweet
    • -
  • icon-shopping-cart
    • -
  • icon-folder-close
    • -
  • icon-folder-open
    • -
  • icon-resize-vertical
    • -
  • icon-resize-horizontal
    • -
  • icon-hdd
    • -
  • icon-bullhorn
    • -
  • icon-bell
    • -
  • icon-certificate
    • -
  • icon-thumbs-up
    • -
  • icon-thumbs-down
    • -
  • icon-hand-right
    • -
  • icon-hand-left
    • -
  • icon-hand-up
    • -
  • icon-hand-down
    • -
  • icon-circle-arrow-right
    • -
  • icon-circle-arrow-left
    • -
  • icon-circle-arrow-up
    • -
  • icon-circle-arrow-down
    • -
  • icon-globe
    • -
  • icon-wrench
    • -
  • icon-tasks
    • -
  • icon-filter
    • -
  • icon-briefcase
    • -
  • icon-fullscreen
    • +
  • glyphicon-glass
    • +
  • glyphicon-music
    • +
  • glyphicon-search
    • +
  • glyphicon-envelope
    • +
  • glyphicon-heart
    • +
  • glyphicon-star
    • +
  • glyphicon-star-empty
    • +
  • glyphicon-user
    • +
  • glyphicon-film
    • +
  • glyphicon-th-large
    • +
  • glyphicon-th
    • +
  • glyphicon-th-list
    • +
  • glyphicon-ok
    • +
  • glyphicon-remove
    • +
  • glyphicon-zoom-in
    • +
  • glyphicon-zoom-out
    • +
  • glyphicon-off
    • +
  • glyphicon-signal
    • +
  • glyphicon-cog
    • +
  • glyphicon-trash
    • +
  • glyphicon-home
    • +
  • glyphicon-file
    • +
  • glyphicon-time
    • +
  • glyphicon-road
    • +
  • glyphicon-download-alt
    • +
  • glyphicon-download
    • +
  • glyphicon-upload
    • +
  • glyphicon-inbox
    • + +
  • glyphicon-play-circle
    • +
  • glyphicon-repeat
    • +
  • glyphicon-refresh
    • +
  • glyphicon-list-alt
    • +
  • glyphicon-lock
    • +
  • glyphicon-flag
    • +
  • glyphicon-headphones
    • +
  • glyphicon-volume-off
    • +
  • glyphicon-volume-down
    • +
  • glyphicon-volume-up
    • +
  • glyphicon-qrcode
    • +
  • glyphicon-barcode
    • +
  • glyphicon-tag
    • +
  • glyphicon-tags
    • +
  • glyphicon-book
    • +
  • glyphicon-bookmark
    • +
  • glyphicon-print
    • +
  • glyphicon-camera
    • +
  • glyphicon-font
    • +
  • glyphicon-bold
    • +
  • glyphicon-italic
    • +
  • glyphicon-text-height
    • +
  • glyphicon-text-width
    • +
  • glyphicon-align-left
    • +
  • glyphicon-align-center
    • +
  • glyphicon-align-right
    • +
  • glyphicon-align-justify
    • +
  • glyphicon-list
    • + +
  • glyphicon-indent-left
    • +
  • glyphicon-indent-right
    • +
  • glyphicon-facetime-video
    • +
  • glyphicon-picture
    • +
  • glyphicon-pencil
    • +
  • glyphicon-map-marker
    • +
  • glyphicon-adjust
    • +
  • glyphicon-tint
    • +
  • glyphicon-edit
    • +
  • glyphicon-share
    • +
  • glyphicon-check
    • +
  • glyphicon-move
    • +
  • glyphicon-step-backward
    • +
  • glyphicon-fast-backward
    • +
  • glyphicon-backward
    • +
  • glyphicon-play
    • +
  • glyphicon-pause
    • +
  • glyphicon-stop
    • +
  • glyphicon-forward
    • +
  • glyphicon-fast-forward
    • +
  • glyphicon-step-forward
    • +
  • glyphicon-eject
    • +
  • glyphicon-chevron-left
    • +
  • glyphicon-chevron-right
    • +
  • glyphicon-plus-sign
    • +
  • glyphicon-minus-sign
    • +
  • glyphicon-remove-sign
    • +
  • glyphicon-ok-sign
    • + +
  • glyphicon-question-sign
    • +
  • glyphicon-info-sign
    • +
  • glyphicon-screenshot
    • +
  • glyphicon-remove-circle
    • +
  • glyphicon-ok-circle
    • +
  • glyphicon-ban-circle
    • +
  • glyphicon-arrow-left
    • +
  • glyphicon-arrow-right
    • +
  • glyphicon-arrow-up
    • +
  • glyphicon-arrow-down
    • +
  • glyphicon-share-alt
    • +
  • glyphicon-resize-full
    • +
  • glyphicon-resize-small
    • +
  • glyphicon-plus
    • +
  • glyphicon-minus
    • +
  • glyphicon-asterisk
    • +
  • glyphicon-exclamation-sign
    • +
  • glyphicon-gift
    • +
  • glyphicon-leaf
    • +
  • glyphicon-fire
    • +
  • glyphicon-eye-open
    • +
  • glyphicon-eye-close
    • +
  • glyphicon-warning-sign
    • +
  • glyphicon-plane
    • +
  • glyphicon-calendar
    • +
  • glyphicon-random
    • +
  • glyphicon-comment
    • +
  • glyphicon-magnet
    • + +
  • glyphicon-chevron-up
    • +
  • glyphicon-chevron-down
    • +
  • glyphicon-retweet
    • +
  • glyphicon-shopping-cart
    • +
  • glyphicon-folder-close
    • +
  • glyphicon-folder-open
    • +
  • glyphicon-resize-vertical
    • +
  • glyphicon-resize-horizontal
    • +
  • glyphicon-hdd
    • +
  • glyphicon-bullhorn
    • +
  • glyphicon-bell
    • +
  • glyphicon-certificate
    • +
  • glyphicon-thumbs-up
    • +
  • glyphicon-thumbs-down
    • +
  • glyphicon-hand-right
    • +
  • glyphicon-hand-left
    • +
  • glyphicon-hand-up
    • +
  • glyphicon-hand-down
    • +
  • glyphicon-circle-arrow-right
    • +
  • glyphicon-circle-arrow-left
    • +
  • glyphicon-circle-arrow-up
    • +
  • glyphicon-circle-arrow-down
    • +
  • glyphicon-globe
    • +
  • glyphicon-wrench
    • +
  • glyphicon-tasks
    • +
  • glyphicon-filter
    • +
  • glyphicon-briefcase
    • +
  • glyphicon-fullscreen
    • + +
  • glyphicon-dashboard
    • +
  • glyphicon-paperclip
    • +
  • glyphicon-heart-empty
    • +
  • glyphicon-link
    • +
  • glyphicon-phone
    • +
  • glyphicon-pushpin
    • +
  • glyphicon-euro
    • +
  • glyphicon-usd
    • +
  • glyphicon-gbp
    • +
  • glyphicon-sort
    • +
  • glyphicon-sort-by-alphabet
    • +
  • glyphicon-sort-by-alphabet-alt
    • +
  • glyphicon-sort-by-order
    • +
  • glyphicon-sort-by-order-alt
    • +
  • glyphicon-sort-by-attributes
    • +
  • glyphicon-sort-by-attributes-alt
    • +
  • glyphicon-unchecked
    • +
  • glyphicon-expand
    • +
  • glyphicon-collapse
    • +
  • glyphicon-collapse-top
    • +

Glyphicons attribution

-

{{_i}}Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.{{/i}}

+

{{_i}}Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creator have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.{{/i}}

{{_i}}How to use{{/i}}

-

{{_i}}All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:{{/i}}

-
-<i class="icon-search"></i>
-
-

{{_i}}There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.{{/i}}

+

{{_i}}Add the appropriate class to any inline element. All icon classes are prefixed with glyphicon- for easy styling. To use, place the following code just about anywhere:{{/i}}

-<i class="icon-search icon-white"></i>
+<i class="glyphicon-search"></i>
+

{{_i}}Want to change the icon color? Just change the color of the parent element.{{/i}}

{{_i}}Heads up!{{/i}} - {{_i}}When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.{{/i}} + {{_i}}When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.{{/i}}

@@ -1896,10 +1916,10 @@
- - - - + + + +
{{! /bs-docs-example }} @@ -1907,10 +1927,10 @@ <div class="btn-toolbar"> <div class="btn-group"> - <a class="btn" href="#"><i class="icon-align-left"></i></a> - <a class="btn" href="#"><i class="icon-align-center"></i></a> - <a class="btn" href="#"><i class="icon-align-right"></i></a> - <a class="btn" href="#"><i class="icon-align-justify"></i></a> + <a class="btn" href="#"><i class="glyphicon-align-left"></i></a> + <a class="btn" href="#"><i class="glyphicon-align-center"></i></a> + <a class="btn" href="#"><i class="glyphicon-align-right"></i></a> + <a class="btn" href="#"><i class="glyphicon-align-justify"></i></a> </div> </div> @@ -1918,12 +1938,12 @@
{{_i}}Dropdown in a button group{{/i}}
- {{_i}}User{{/i}} + {{_i}}User{{/i}} @@ -1931,12 +1951,12 @@
{{! /bs-docs-example }} 
 <div class="btn-group">
-  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> {{_i}}User{{/i}}</a>
+  <a class="btn btn-primary" href="#"><i class="glyphicon-user icon-white"></i> {{_i}}User{{/i}}</a>
   <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
   <ul class="dropdown-menu">
-    <li><a href="#"><i class="icon-pencil"></i> {{_i}}Edit{{/i}}</a></li>
-    <li><a href="#"><i class="icon-trash"></i> {{_i}}Delete{{/i}}</a></li>
-    <li><a href="#"><i class="icon-ban-circle"></i> {{_i}}Ban{{/i}}</a></li>
+    <li><a href="#"><i class="glyphicon-pencil"></i> {{_i}}Edit{{/i}}</a></li>
+    <li><a href="#"><i class="glyphicon-trash"></i> {{_i}}Delete{{/i}}</a></li>
+    <li><a href="#"><i class="glyphicon-ban-circle"></i> {{_i}}Ban{{/i}}</a></li>
     <li class="divider"></li>
     <li><a href="#"><i class="i"></i> {{_i}}Make admin{{/i}}</a></li>
   </ul>
@@ -1945,10 +1965,10 @@
 
           
{{_i}}Small button{{/i}}

           

-            
+            
           
{{! /bs-docs-example }}
 
-<a class="btn btn-small" href="#"><i class="icon-star"></i></a>
+<a class="btn btn-small" href="#"><i class="glyphicon-star"></i></a>
 

 
 
@@ -1956,18 +1976,18 @@
           

             

               
             
{{! /well }}
           
{{! /bs-docs-example }}
 
 <ul class="nav nav-list">
-  <li class="active"><a href="#"><i class="icon-home icon-white"></i> {{_i}}Home{{/i}}</a></li>
-  <li><a href="#"><i class="icon-book"></i> {{_i}}Library{{/i}}</a></li>
-  <li><a href="#"><i class="icon-pencil"></i> {{_i}}Applications{{/i}}</a></li>
+  <li class="active"><a href="#"><i class="glyphicon-home icon-white"></i> {{_i}}Home{{/i}}</a></li>
+  <li><a href="#"><i class="glyphicon-book"></i> {{_i}}Library{{/i}}</a></li>
+  <li><a href="#"><i class="glyphicon-pencil"></i> {{_i}}Applications{{/i}}</a></li>
   <li><a href="#"><i class="i"></i> {{_i}}Misc{{/i}}</a></li>
 </ul>
 

@@ -1978,7 +1998,7 @@
               
               

                 

-                  
+
@@ -1988,7 +2008,7 @@ <label class="control-label" for="inputIcon">{{_i}}Email address{{/i}}</label> <div class="controls"> <div class="input-prepend"> - <span class="add-on"><i class="icon-envelope"></i></span> + <span class="add-on"><i class="glyphicon-envelope"></i></span> <input class="span2" id="inputIcon" type="text"> </div> </div> diff --git a/fonts/glyphiconshalflings-regular.eot b/fonts/glyphiconshalflings-regular.eot new file mode 100755 index 000000000..bd59ccd2d Binary files /dev/null and b/fonts/glyphiconshalflings-regular.eot differ diff --git a/fonts/glyphiconshalflings-regular.otf b/fonts/glyphiconshalflings-regular.otf new file mode 100644 index 000000000..b058f1cd1 Binary files /dev/null and b/fonts/glyphiconshalflings-regular.otf differ diff --git a/fonts/glyphiconshalflings-regular.svg b/fonts/glyphiconshalflings-regular.svg new file mode 100755 index 000000000..0fb458735 --- /dev/null +++ b/fonts/glyphiconshalflings-regular.svg @@ -0,0 +1,175 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/fonts/glyphiconshalflings-regular.ttf b/fonts/glyphiconshalflings-regular.ttf new file mode 100755 index 000000000..c63c068fe Binary files /dev/null and b/fonts/glyphiconshalflings-regular.ttf differ diff --git a/fonts/glyphiconshalflings-regular.woff b/fonts/glyphiconshalflings-regular.woff new file mode 100755 index 000000000..4c778ffdc Binary files /dev/null and b/fonts/glyphiconshalflings-regular.woff differ diff --git a/img/glyphicons-halflings-white.png b/img/glyphicons-halflings-white.png deleted file mode 100644 index 3bf6484a2..000000000 Binary files a/img/glyphicons-halflings-white.png and /dev/null differ diff --git a/img/glyphicons-halflings.png b/img/glyphicons-halflings.png deleted file mode 100644 index a99699932..000000000 Binary files a/img/glyphicons-halflings.png and /dev/null differ diff --git a/less/bootstrap.less b/less/bootstrap.less index 14bb3f044..8eecc7095 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -27,7 +27,7 @@ @import "tables.less"; // Components: common -@import "sprites.less"; +@import "glyphicons.less"; @import "dropdowns.less"; @import "wells.less"; @import "component-animations.less"; diff --git a/less/buttons.less b/less/buttons.less index 63f2d86c8..3e07b2b05 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -67,9 +67,8 @@ } - // Button Sizes -// -------------------------------------------------- +// ------------------------- // Large .btn-large { @@ -77,10 +76,6 @@ font-size: @fontSizeLarge; .border-radius(@borderRadiusLarge); } -.btn-large [class^="icon-"], -.btn-large [class*=" icon-"] { - margin-top: 2px; -} // Small .btn-small { @@ -88,10 +83,6 @@ font-size: @fontSizeSmall; .border-radius(@borderRadiusSmall); } -.btn-small [class^="icon-"], -.btn-small [class*=" icon-"] { - margin-top: 0; -} // Mini .btn-mini { @@ -101,6 +92,14 @@ } +// Icons in buttons +// ------------------------- + +.btn-large [class^="glyphicon-"]::before { font-size: 14px; } +.btn-small [class^="glyphicon-"]::before { font-size: 10px; } +.btn-mini [class^="glyphicon-"]::before { font-size: 9px; } + + // Block button // ------------------------- diff --git a/less/glyphicons.less b/less/glyphicons.less new file mode 100644 index 000000000..64e954f35 --- /dev/null +++ b/less/glyphicons.less @@ -0,0 +1,199 @@ +// +// Glyphicons +// ----------------------------------------------------------------------------- + +// About +// +// Glyphicons font-based icons require you to include all relevant font files, +// found in the Bootstrap repo under /fonts/. Files are referenced relative to +// the compiled CSS. +// +// Basic usage +// +// Since icons are fonts, they can be placed anywhere text is placed. To use, +// create an inline element with the appropriate class, like so: +// +// Star +// +// Use them in links, buttons, headings, and more. + + +// Import the fonts +@font-face { + font-family: 'Glyphicons Halflings'; + src: url('../fonts/glyphiconshalflings-regular.eot'); + src: url('../fonts/glyphiconshalflings-regular.eot?#iefix') format('embedded-opentype'), + url('../fonts/glyphiconshalflings-regular.woff') format('woff'), + url('../fonts/glyphiconshalflings-regular.ttf') format('truetype'), + url('../fonts/glyphiconshalflings-regular.svg#glyphicons_halflingsregular') format('svg'); + font-style: normal; + font-weight: normal; +} + +// Catchall baseclass +[class^="glyphicon-"]:before { + display: inline-block; + font: normal 12px/1 'Glyphicons Halflings'; +} + +// Individual icons +.glyphicon-glass:before { content: "\e001"; } +.glyphicon-music:before { content: "\e002"; } +.glyphicon-search:before { content: "\e003"; } +.glyphicon-envelope:before { content: "\2709"; } +.glyphicon-heart:before { content: "\e005"; } +.glyphicon-star:before { content: "\e006"; } +.glyphicon-star-empty:before { content: "\e007"; } +.glyphicon-user:before { content: "\e008"; } +.glyphicon-film:before { content: "\e009"; } +.glyphicon-th-large:before { content: "\e010"; } +.glyphicon-th:before { content: "\e011"; } +.glyphicon-th-list:before { content: "\e012"; } +.glyphicon-ok:before { content: "\e013"; } +.glyphicon-remove:before { content: "\e014"; } +.glyphicon-zoom-in:before { content: "\e015"; } +.glyphicon-zoom-out:before { content: "\e016"; } +.glyphicon-off:before { content: "\e017"; } +.glyphicon-signal:before { content: "\e018"; } +.glyphicon-cog:before { content: "\e019"; } +.glyphicon-trash:before { content: "\e020"; } +.glyphicon-home:before { content: "\e021"; } +.glyphicon-file:before { content: "\e022"; } +.glyphicon-time:before { content: "\e023"; } +.glyphicon-road:before { content: "\e024"; } +.glyphicon-download-alt:before { content: "\e025"; } +.glyphicon-download:before { content: "\e026"; } +.glyphicon-upload:before { content: "\e027"; } +.glyphicon-inbox:before { content: "\e028"; } +.glyphicon-play-circle:before { content: "\e029"; } +.glyphicon-repeat:before { content: "\e030"; } +.glyphicon-refresh:before { content: "\e031"; } +.glyphicon-list-alt:before { content: "\e032"; } +.glyphicon-lock:before { content: "\e033"; } +.glyphicon-flag:before { content: "\e034"; } +.glyphicon-headphones:before { content: "\e035"; } +.glyphicon-volume-off:before { content: "\e036"; } +.glyphicon-volume-down:before { content: "\e037"; } +.glyphicon-volume-up:before { content: "\e038"; } +.glyphicon-qrcode:before { content: "\e039"; } +.glyphicon-barcode:before { content: "\e040"; } +.glyphicon-tag:before { content: "\e041"; } +.glyphicon-tags:before { content: "\e042"; } +.glyphicon-book:before { content: "\e043"; } +.glyphicon-bookmark:before { content: "\e044"; } +.glyphicon-print:before { content: "\e045"; } +.glyphicon-camera:before { content: "\e046"; } +.glyphicon-font:before { content: "\e047"; } +.glyphicon-bold:before { content: "\e048"; } +.glyphicon-italic:before { content: "\e049"; } +.glyphicon-text-height:before { content: "\e050"; } +.glyphicon-text-width:before { content: "\e051"; } +.glyphicon-align-left:before { content: "\e052"; } +.glyphicon-align-center:before { content: "\e053"; } +.glyphicon-align-right:before { content: "\e054"; } +.glyphicon-align-justify:before { content: "\e055"; } +.glyphicon-list:before { content: "\e056"; } +.glyphicon-indent-left:before { content: "\e057"; } +.glyphicon-indent-right:before { content: "\e058"; } +.glyphicon-facetime-video:before { content: "\e059"; } +.glyphicon-picture:before { content: "\e060"; } +.glyphicon-pencil:before { content: "\270f"; } +.glyphicon-map-marker:before { content: "\e062"; } +.glyphicon-adjust:before { content: "\e063"; } +.glyphicon-tint:before { content: "\e064"; } +.glyphicon-edit:before { content: "\e065"; } +.glyphicon-share:before { content: "\e066"; } +.glyphicon-check:before { content: "\e067"; } +.glyphicon-move:before { content: "\e068"; } +.glyphicon-step-backward:before { content: "\e069"; } +.glyphicon-fast-backward:before { content: "\e070"; } +.glyphicon-backward:before { content: "\e071"; } +.glyphicon-play:before { content: "\e072"; } +.glyphicon-pause:before { content: "\e073"; } +.glyphicon-stop:before { content: "\e074"; } +.glyphicon-forward:before { content: "\e075"; } +.glyphicon-fast-forward:before { content: "\e076"; } +.glyphicon-step-forward:before { content: "\e077"; } +.glyphicon-eject:before { content: "\e078"; } +.glyphicon-chevron-left:before { content: "\e079"; } +.glyphicon-chevron-right:before { content: "\e080"; } +.glyphicon-plus-sign:before { content: "\e081"; } +.glyphicon-minus-sign:before { content: "\e082"; } +.glyphicon-remove-sign:before { content: "\e083"; } +.glyphicon-ok-sign:before { content: "\e084"; } +.glyphicon-question-sign:before { content: "\e085"; } +.glyphicon-info-sign:before { content: "\e086"; } +.glyphicon-screenshot:before { content: "\e087"; } +.glyphicon-remove-circle:before { content: "\e088"; } +.glyphicon-ok-circle:before { content: "\e089"; } +.glyphicon-ban-circle:before { content: "\e090"; } +.glyphicon-arrow-left:before { content: "\e091"; } +.glyphicon-arrow-right:before { content: "\e092"; } +.glyphicon-arrow-up:before { content: "\e093"; } +.glyphicon-arrow-down:before { content: "\e094"; } +.glyphicon-share-alt:before { content: "\e095"; } +.glyphicon-resize-full:before { content: "\e096"; } +.glyphicon-resize-small:before { content: "\e097"; } +.glyphicon-plus:before { content: "\002b"; } +.glyphicon-minus:before { content: "\2212"; } +.glyphicon-asterisk:before { content: "\002a"; } +.glyphicon-exclamation-sign:before { content: "\e101"; } +.glyphicon-gift:before { content: "\e102"; } +.glyphicon-leaf:before { content: "\e103"; } +.glyphicon-fire:before { content: "\e104"; } +.glyphicon-eye-open:before { content: "\e105"; } +.glyphicon-eye-close:before { content: "\e106"; } +.glyphicon-warning-sign:before { content: "\e107"; } +.glyphicon-plane:before { content: "\e108"; } +.glyphicon-calendar:before { content: "\e109"; } +.glyphicon-random:before { content: "\e110"; } +.glyphicon-comment:before { content: "\e111"; } +.glyphicon-magnet:before { content: "\e112"; } +.glyphicon-chevron-up:before { content: "\e113"; } +.glyphicon-chevron-down:before { content: "\e114"; } +.glyphicon-retweet:before { content: "\e115"; } +.glyphicon-shopping-cart:before { content: "\e116"; } +.glyphicon-folder-close:before { content: "\e117"; } +.glyphicon-folder-open:before { content: "\e118"; } +.glyphicon-resize-vertical:before { content: "\e119"; } +.glyphicon-resize-horizontal:before { content: "\e120"; } +.glyphicon-hdd:before { content: "\e121"; } +.glyphicon-bullhorn:before { content: "\e122"; } +.glyphicon-bell:before { content: "\e123"; } +.glyphicon-certificate:before { content: "\e124"; } +.glyphicon-thumbs-up:before { content: "\e125"; } +.glyphicon-thumbs-down:before { content: "\e126"; } +.glyphicon-hand-right:before { content: "\e127"; } +.glyphicon-hand-left:before { content: "\e128"; } +.glyphicon-hand-up:before { content: "\e129"; } +.glyphicon-hand-down:before { content: "\e130"; } +.glyphicon-circle-arrow-right:before { content: "\e131"; } +.glyphicon-circle-arrow-left:before { content: "\e132"; } +.glyphicon-circle-arrow-up:before { content: "\e133"; } +.glyphicon-circle-arrow-down:before { content: "\e134"; } +.glyphicon-globe:before { content: "\e135"; } +.glyphicon-wrench:before { content: "\e136"; } +.glyphicon-tasks:before { content: "\e137"; } +.glyphicon-filter:before { content: "\e138"; } +.glyphicon-briefcase:before { content: "\e139"; } +.glyphicon-fullscreen:before { content: "\e140"; } +.glyphicon-dashboard:before { content: "\e141"; } +.glyphicon-paperclip:before { content: "\e142"; } +.glyphicon-heart-empty:before { content: "\e143"; } +.glyphicon-link:before { content: "\e144"; } +.glyphicon-phone:before { content: "\e145"; } +.glyphicon-pushpin:before { content: "\e146"; } +.glyphicon-euro:before { content: "\20ac"; } +.glyphicon-usd:before { content: "\e148"; } +.glyphicon-gbp:before { content: "\e149"; } +.glyphicon-sort:before { content: "\e150"; } +.glyphicon-sort-by-alphabet:before { content: "\e151"; } +.glyphicon-sort-by-alphabet-alt:before { content: "\e152"; } +.glyphicon-sort-by-order:before { content: "\e153"; } +.glyphicon-sort-by-order-alt:before { content: "\e154"; } +.glyphicon-sort-by-attributes:before { content: "\e155"; } +.glyphicon-sort-by-attributes-alt:before { content: "\e156"; } +.glyphicon-unchecked:before { content: "\e157"; } +.glyphicon-expand:before { content: "\e158"; } +.glyphicon-collapse:before { content: "\e159"; } +.glyphicon-collapse-top:before { content: "\e160"; } diff --git a/less/sprites.less b/less/sprites.less deleted file mode 100644 index 9cd2ae3bf..000000000 --- a/less/sprites.less +++ /dev/null @@ -1,193 +0,0 @@ -// -// Sprites -// -------------------------------------------------- - - -// ICONS -// ----- - -// All icons receive the styles of the tag with a base class -// of .i and are then given a unique class to add width, height, -// and background-position. Your resulting HTML will look like -// . - -// For the white version of the icons, just add the .icon-white class: -// - -[class^="icon-"], -[class*=" icon-"] { - display: inline-block; - width: 14px; - height: 14px; - .ie7-restore-right-whitespace(); - line-height: 14px; - vertical-align: text-top; - background-image: url("@{iconSpritePath}"); - background-position: 14px 14px; - background-repeat: no-repeat; - margin-top: 1px; -} - -/* White icons with optional class, or on hover/active states of certain elements */ -.icon-white, -.nav-pills > .active > a > [class^="icon-"], -.nav-pills > .active > a > [class*=" icon-"], -.nav-list > .active > a > [class^="icon-"], -.nav-list > .active > a > [class*=" icon-"], -.navbar-inverse .nav > .active > a > [class^="icon-"], -.navbar-inverse .nav > .active > a > [class*=" icon-"], -.dropdown-menu > li > a:hover > [class^="icon-"], -.dropdown-menu > li > a:hover > [class*=" icon-"], -.dropdown-menu > .active > a > [class^="icon-"], -.dropdown-menu > .active > a > [class*=" icon-"], -.dropdown-submenu:hover > a > [class^="icon-"], -.dropdown-submenu:hover > a > [class*=" icon-"] { - background-image: url("@{iconWhiteSpritePath}"); -} - -.icon-glass { background-position: 0 0; } -.icon-music { background-position: -24px 0; } -.icon-search { background-position: -48px 0; } -.icon-envelope { background-position: -72px 0; } -.icon-heart { background-position: -96px 0; } -.icon-star { background-position: -120px 0; } -.icon-star-empty { background-position: -144px 0; } -.icon-user { background-position: -168px 0; } -.icon-film { background-position: -192px 0; } -.icon-th-large { background-position: -216px 0; } -.icon-th { background-position: -240px 0; } -.icon-th-list { background-position: -264px 0; } -.icon-ok { background-position: -288px 0; } -.icon-remove { background-position: -312px 0; } -.icon-zoom-in { background-position: -336px 0; } -.icon-zoom-out { background-position: -360px 0; } -.icon-off { background-position: -384px 0; } -.icon-signal { background-position: -408px 0; } -.icon-cog { background-position: -432px 0; } -.icon-trash { background-position: -456px 0; } - -.icon-home { background-position: 0 -24px; } -.icon-file { background-position: -24px -24px; } -.icon-time { background-position: -48px -24px; } -.icon-road { background-position: -72px -24px; } -.icon-download-alt { background-position: -96px -24px; } -.icon-download { background-position: -120px -24px; } -.icon-upload { background-position: -144px -24px; } -.icon-inbox { background-position: -168px -24px; } -.icon-play-circle { background-position: -192px -24px; } -.icon-repeat { background-position: -216px -24px; } -.icon-refresh { background-position: -240px -24px; } -.icon-list-alt { background-position: -264px -24px; } -.icon-lock { background-position: -287px -24px; } // 1px off -.icon-flag { background-position: -312px -24px; } -.icon-headphones { background-position: -336px -24px; } -.icon-volume-off { background-position: -360px -24px; } -.icon-volume-down { background-position: -384px -24px; } -.icon-volume-up { background-position: -408px -24px; } -.icon-qrcode { background-position: -432px -24px; } -.icon-barcode { background-position: -456px -24px; } - -.icon-tag { background-position: 0 -48px; } -.icon-tags { background-position: -25px -48px; } // 1px off -.icon-book { background-position: -48px -48px; } -.icon-bookmark { background-position: -72px -48px; } -.icon-print { background-position: -96px -48px; } -.icon-camera { background-position: -120px -48px; } -.icon-font { background-position: -144px -48px; } -.icon-bold { background-position: -167px -48px; } // 1px off -.icon-italic { background-position: -192px -48px; } -.icon-text-height { background-position: -216px -48px; } -.icon-text-width { background-position: -240px -48px; } -.icon-align-left { background-position: -264px -48px; } -.icon-align-center { background-position: -288px -48px; } -.icon-align-right { background-position: -312px -48px; } -.icon-align-justify { background-position: -336px -48px; } -.icon-list { background-position: -360px -48px; } -.icon-indent-left { background-position: -384px -48px; } -.icon-indent-right { background-position: -408px -48px; } -.icon-facetime-video { background-position: -432px -48px; } -.icon-picture { background-position: -456px -48px; } - -.icon-pencil { background-position: 0 -72px; } -.icon-map-marker { background-position: -24px -72px; } -.icon-adjust { background-position: -48px -72px; } -.icon-tint { background-position: -72px -72px; } -.icon-edit { background-position: -96px -72px; } -.icon-share { background-position: -120px -72px; } -.icon-check { background-position: -144px -72px; } -.icon-move { background-position: -168px -72px; } -.icon-step-backward { background-position: -192px -72px; } -.icon-fast-backward { background-position: -216px -72px; } -.icon-backward { background-position: -240px -72px; } -.icon-play { background-position: -264px -72px; } -.icon-pause { background-position: -288px -72px; } -.icon-stop { background-position: -312px -72px; } -.icon-forward { background-position: -336px -72px; } -.icon-fast-forward { background-position: -360px -72px; } -.icon-step-forward { background-position: -384px -72px; } -.icon-eject { background-position: -408px -72px; } -.icon-chevron-left { background-position: -432px -72px; } -.icon-chevron-right { background-position: -456px -72px; } - -.icon-plus-sign { background-position: 0 -96px; } -.icon-minus-sign { background-position: -24px -96px; } -.icon-remove-sign { background-position: -48px -96px; } -.icon-ok-sign { background-position: -72px -96px; } -.icon-question-sign { background-position: -96px -96px; } -.icon-info-sign { background-position: -120px -96px; } -.icon-screenshot { background-position: -144px -96px; } -.icon-remove-circle { background-position: -168px -96px; } -.icon-ok-circle { background-position: -192px -96px; } -.icon-ban-circle { background-position: -216px -96px; } -.icon-arrow-left { background-position: -240px -96px; } -.icon-arrow-right { background-position: -264px -96px; } -.icon-arrow-up { background-position: -289px -96px; } // 1px off -.icon-arrow-down { background-position: -312px -96px; } -.icon-share-alt { background-position: -336px -96px; } -.icon-resize-full { background-position: -360px -96px; } -.icon-resize-small { background-position: -384px -96px; } -.icon-plus { background-position: -408px -96px; } -.icon-minus { background-position: -433px -96px; } -.icon-asterisk { background-position: -456px -96px; } - -.icon-exclamation-sign { background-position: 0 -120px; } -.icon-gift { background-position: -24px -120px; } -.icon-leaf { background-position: -48px -120px; } -.icon-fire { background-position: -72px -120px; } -.icon-eye-open { background-position: -96px -120px; } -.icon-eye-close { background-position: -120px -120px; } -.icon-warning-sign { background-position: -144px -120px; } -.icon-plane { background-position: -168px -120px; } -.icon-calendar { background-position: -192px -120px; } -.icon-random { background-position: -216px -120px; width: 16px; } -.icon-comment { background-position: -240px -120px; } -.icon-magnet { background-position: -264px -120px; } -.icon-chevron-up { background-position: -288px -120px; } -.icon-chevron-down { background-position: -313px -119px; } // 1px, 1px off -.icon-retweet { background-position: -336px -120px; } -.icon-shopping-cart { background-position: -360px -120px; } -.icon-folder-close { background-position: -384px -120px; } -.icon-folder-open { background-position: -408px -120px; width: 16px; } -.icon-resize-vertical { background-position: -432px -119px; } // 1px, 1px off -.icon-resize-horizontal { background-position: -456px -118px; } // 1px, 2px off - -.icon-hdd { background-position: 0 -144px; } -.icon-bullhorn { background-position: -24px -144px; } -.icon-bell { background-position: -48px -144px; } -.icon-certificate { background-position: -72px -144px; } -.icon-thumbs-up { background-position: -96px -144px; } -.icon-thumbs-down { background-position: -120px -144px; } -.icon-hand-right { background-position: -144px -144px; } -.icon-hand-left { background-position: -168px -144px; } -.icon-hand-up { background-position: -192px -144px; } -.icon-hand-down { background-position: -216px -144px; } -.icon-circle-arrow-right { background-position: -240px -144px; } -.icon-circle-arrow-left { background-position: -264px -144px; } -.icon-circle-arrow-up { background-position: -288px -144px; } -.icon-circle-arrow-down { background-position: -312px -144px; } -.icon-globe { background-position: -336px -144px; } -.icon-wrench { background-position: -360px -144px; } -.icon-tasks { background-position: -384px -144px; } -.icon-filter { background-position: -408px -144px; } -.icon-briefcase { background-position: -432px -144px; } -.icon-fullscreen { background-position: -456px -144px; } diff --git a/less/tests/buttons.html b/less/tests/buttons.html index 5fe7f664b..add63b4c9 100644 --- a/less/tests/buttons.html +++ b/less/tests/buttons.html @@ -34,6 +34,77 @@
+

Icons in buttons

+

+ + + + +

+

+ + + + +

+

+ + + + +

+

+ + + + +

+ +
+
+ + + + +
+
+ + +
+ +

Dropups

diff --git a/less/variables.less b/less/variables.less index 7b70f44db..36f9c23e8 100644 --- a/less/variables.less +++ b/less/variables.less @@ -68,7 +68,7 @@ @paddingLarge: 11px 19px; // 44px @paddingSmall: 2px 10px; // 26px -@paddingMini: 1px 6px; // 24px +@paddingMini: 0 6px; // 24px @baseBorderRadius: 4px; @borderRadiusLarge: 6px; -- cgit v1.2.3 From 4b3fb3087738ba2836538bacd34256503b6afc96 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 2 Nov 2012 01:39:40 -0700 Subject: tweaks to icons defaults and in buttons improve vertical align --- docs/assets/css/bootstrap.css | 16 +++++++--------- less/buttons.less | 6 +++--- less/glyphicons.less | 5 +++-- 3 files changed, 13 insertions(+), 14 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 52865cf0d..2600fc4d4 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -2162,8 +2162,9 @@ table th[class*="span"], } [class^="glyphicon-"]:before { - display: inline-block; - font: normal 12px/1 'Glyphicons Halflings'; + font-family: 'Glyphicons Halflings'; + font-style: normal; + line-height: 1; } .glyphicon-glass:before { @@ -3237,16 +3238,13 @@ button.close { border-radius: 3px; } -.btn-large [class^="glyphicon-"]::before { - font-size: 14px; -} - -.btn-small [class^="glyphicon-"]::before { - font-size: 10px; +.btn [class^="glyphicon-"]::before { + vertical-align: -2px; } +.btn-small [class^="glyphicon-"]::before, .btn-mini [class^="glyphicon-"]::before { - font-size: 9px; + vertical-align: -1px; } .btn-block { diff --git a/less/buttons.less b/less/buttons.less index 3e07b2b05..45bd07604 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -95,9 +95,9 @@ // Icons in buttons // ------------------------- -.btn-large [class^="glyphicon-"]::before { font-size: 14px; } -.btn-small [class^="glyphicon-"]::before { font-size: 10px; } -.btn-mini [class^="glyphicon-"]::before { font-size: 9px; } +.btn [class^="glyphicon-"]::before { vertical-align: -2px; } +.btn-small [class^="glyphicon-"]::before, +.btn-mini [class^="glyphicon-"]::before { vertical-align: -1px; } // Block button diff --git a/less/glyphicons.less b/less/glyphicons.less index 64e954f35..ad22b4579 100644 --- a/less/glyphicons.less +++ b/less/glyphicons.less @@ -32,8 +32,9 @@ // Catchall baseclass [class^="glyphicon-"]:before { - display: inline-block; - font: normal 12px/1 'Glyphicons Halflings'; + font-family: 'Glyphicons Halflings'; + font-style: normal; + line-height: 1; } // Individual icons -- cgit v1.2.3