diff --git a/Makefile b/Makefile index 6687947423..3acd16e62b 100644 --- a/Makefile +++ b/Makefile @@ -19,7 +19,7 @@ build: @recess --compile ${BOOTSTRAP_LESS} > ${BOOTSTRAP} @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" @@ -60,10 +60,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 cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js js/bootstrap-affix.js > bootstrap/js/bootstrap.js diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 1241ac6874..7320e6da42 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1031,7 +1031,7 @@ input[type="search"].input-mini, input[type="tel"].input-mini, input[type="color"].input-mini, .uneditable-input.input-mini { - padding: 1px 6px; + padding: 0 6px; font-size: 10.5px; border-radius: 3px; } @@ -1944,597 +1944,658 @@ table th[class*="span"], background-color: #c4e3f3; } -[class^="icon-"], -[class*=" icon-"] { - display: inline-block; - width: 14px; - height: 14px; - margin-top: 1px; - line-height: 14px; - vertical-align: text-top; - background-image: url("../img/glyphicons-halflings.png"); - background-position: 14px 14px; - background-repeat: no-repeat; +@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'); } -/* White icons with optional class, or on hover/active states of certain elements */ +[class^="glyphicon-"]:before { + font-family: 'Glyphicons Halflings'; + font-style: normal; + line-height: 1; +} + +.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"; +} -.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-trash:before { + content: "\e020"; } -.icon-glass { - background-position: 0 0; +.glyphicon-home:before { + content: "\e021"; } -.icon-music { - background-position: -24px 0; +.glyphicon-file:before { + content: "\e022"; } -.icon-search { - background-position: -48px 0; +.glyphicon-time:before { + content: "\e023"; } -.icon-envelope { - background-position: -72px 0; +.glyphicon-road:before { + content: "\e024"; } -.icon-heart { - background-position: -96px 0; +.glyphicon-download-alt:before { + content: "\e025"; } -.icon-star { - background-position: -120px 0; +.glyphicon-download:before { + content: "\e026"; } -.icon-star-empty { - background-position: -144px 0; +.glyphicon-upload:before { + content: "\e027"; } -.icon-user { - background-position: -168px 0; +.glyphicon-inbox:before { + content: "\e028"; } -.icon-film { - background-position: -192px 0; +.glyphicon-play-circle:before { + content: "\e029"; } -.icon-th-large { - background-position: -216px 0; +.glyphicon-repeat:before { + content: "\e030"; } -.icon-th { - background-position: -240px 0; +.glyphicon-refresh:before { + content: "\e031"; } -.icon-th-list { - background-position: -264px 0; +.glyphicon-list-alt:before { + content: "\e032"; } -.icon-ok { - background-position: -288px 0; +.glyphicon-lock:before { + content: "\e033"; } -.icon-remove { - background-position: -312px 0; +.glyphicon-flag:before { + content: "\e034"; } -.icon-zoom-in { - background-position: -336px 0; +.glyphicon-headphones:before { + content: "\e035"; } -.icon-zoom-out { - background-position: -360px 0; +.glyphicon-volume-off:before { + content: "\e036"; } -.icon-off { - background-position: -384px 0; +.glyphicon-volume-down:before { + content: "\e037"; } -.icon-signal { - background-position: -408px 0; +.glyphicon-volume-up:before { + content: "\e038"; } -.icon-cog { - background-position: -432px 0; +.glyphicon-qrcode:before { + content: "\e039"; } -.icon-trash { - background-position: -456px 0; +.glyphicon-barcode:before { + content: "\e040"; } -.icon-home { - background-position: 0 -24px; +.glyphicon-tag:before { + content: "\e041"; } -.icon-file { - background-position: -24px -24px; +.glyphicon-tags:before { + content: "\e042"; } -.icon-time { - background-position: -48px -24px; +.glyphicon-book:before { + content: "\e043"; } -.icon-road { - background-position: -72px -24px; +.glyphicon-bookmark:before { + content: "\e044"; } -.icon-download-alt { - background-position: -96px -24px; +.glyphicon-print:before { + content: "\e045"; } -.icon-download { - background-position: -120px -24px; +.glyphicon-camera:before { + content: "\e046"; } -.icon-upload { - background-position: -144px -24px; +.glyphicon-font:before { + content: "\e047"; } -.icon-inbox { - background-position: -168px -24px; +.glyphicon-bold:before { + content: "\e048"; } -.icon-play-circle { - background-position: -192px -24px; +.glyphicon-italic:before { + content: "\e049"; } -.icon-repeat { - background-position: -216px -24px; +.glyphicon-text-height:before { + content: "\e050"; } -.icon-refresh { - background-position: -240px -24px; +.glyphicon-text-width:before { + content: "\e051"; } -.icon-list-alt { - background-position: -264px -24px; +.glyphicon-align-left:before { + content: "\e052"; } -.icon-lock { - background-position: -287px -24px; +.glyphicon-align-center:before { + content: "\e053"; } -.icon-flag { - background-position: -312px -24px; +.glyphicon-align-right:before { + content: "\e054"; } -.icon-headphones { - background-position: -336px -24px; +.glyphicon-align-justify:before { + content: "\e055"; } -.icon-volume-off { - background-position: -360px -24px; +.glyphicon-list:before { + content: "\e056"; } -.icon-volume-down { - background-position: -384px -24px; +.glyphicon-indent-left:before { + content: "\e057"; } -.icon-volume-up { - background-position: -408px -24px; +.glyphicon-indent-right:before { + content: "\e058"; } -.icon-qrcode { - background-position: -432px -24px; +.glyphicon-facetime-video:before { + content: "\e059"; } -.icon-barcode { - background-position: -456px -24px; +.glyphicon-picture:before { + content: "\e060"; } -.icon-tag { - background-position: 0 -48px; +.glyphicon-pencil:before { + content: "\270f"; } -.icon-tags { - background-position: -25px -48px; +.glyphicon-map-marker:before { + content: "\e062"; } -.icon-book { - background-position: -48px -48px; +.glyphicon-adjust:before { + content: "\e063"; } -.icon-bookmark { - background-position: -72px -48px; +.glyphicon-tint:before { + content: "\e064"; } -.icon-print { - background-position: -96px -48px; +.glyphicon-edit:before { + content: "\e065"; } -.icon-camera { - background-position: -120px -48px; +.glyphicon-share:before { + content: "\e066"; } -.icon-font { - background-position: -144px -48px; +.glyphicon-check:before { + content: "\e067"; } -.icon-bold { - background-position: -167px -48px; +.glyphicon-move:before { + content: "\e068"; } -.icon-italic { - background-position: -192px -48px; +.glyphicon-step-backward:before { + content: "\e069"; } -.icon-text-height { - background-position: -216px -48px; +.glyphicon-fast-backward:before { + content: "\e070"; } -.icon-text-width { - background-position: -240px -48px; +.glyphicon-backward:before { + content: "\e071"; } -.icon-align-left { - background-position: -264px -48px; +.glyphicon-play:before { + content: "\e072"; } -.icon-align-center { - background-position: -288px -48px; +.glyphicon-pause:before { + content: "\e073"; } -.icon-align-right { - background-position: -312px -48px; +.glyphicon-stop:before { + content: "\e074"; } -.icon-align-justify { - background-position: -336px -48px; +.glyphicon-forward:before { + content: "\e075"; } -.icon-list { - background-position: -360px -48px; +.glyphicon-fast-forward:before { + content: "\e076"; } -.icon-indent-left { - background-position: -384px -48px; +.glyphicon-step-forward:before { + content: "\e077"; } -.icon-indent-right { - background-position: -408px -48px; +.glyphicon-eject:before { + content: "\e078"; } -.icon-facetime-video { - background-position: -432px -48px; +.glyphicon-chevron-left:before { + content: "\e079"; } -.icon-picture { - background-position: -456px -48px; +.glyphicon-chevron-right:before { + content: "\e080"; } -.icon-pencil { - background-position: 0 -72px; +.glyphicon-plus-sign:before { + content: "\e081"; } -.icon-map-marker { - background-position: -24px -72px; +.glyphicon-minus-sign:before { + content: "\e082"; } -.icon-adjust { - background-position: -48px -72px; +.glyphicon-remove-sign:before { + content: "\e083"; } -.icon-tint { - background-position: -72px -72px; +.glyphicon-ok-sign:before { + content: "\e084"; } -.icon-edit { - background-position: -96px -72px; +.glyphicon-question-sign:before { + content: "\e085"; } -.icon-share { - background-position: -120px -72px; +.glyphicon-info-sign:before { + content: "\e086"; } -.icon-check { - background-position: -144px -72px; +.glyphicon-screenshot:before { + content: "\e087"; } -.icon-move { - background-position: -168px -72px; +.glyphicon-remove-circle:before { + content: "\e088"; } -.icon-step-backward { - background-position: -192px -72px; +.glyphicon-ok-circle:before { + content: "\e089"; } -.icon-fast-backward { - background-position: -216px -72px; +.glyphicon-ban-circle:before { + content: "\e090"; } -.icon-backward { - background-position: -240px -72px; +.glyphicon-arrow-left:before { + content: "\e091"; } -.icon-play { - background-position: -264px -72px; +.glyphicon-arrow-right:before { + content: "\e092"; } -.icon-pause { - background-position: -288px -72px; +.glyphicon-arrow-up:before { + content: "\e093"; } -.icon-stop { - background-position: -312px -72px; +.glyphicon-arrow-down:before { + content: "\e094"; } -.icon-forward { - background-position: -336px -72px; +.glyphicon-share-alt:before { + content: "\e095"; } -.icon-fast-forward { - background-position: -360px -72px; +.glyphicon-resize-full:before { + content: "\e096"; } -.icon-step-forward { - background-position: -384px -72px; +.glyphicon-resize-small:before { + content: "\e097"; } -.icon-eject { - background-position: -408px -72px; +.glyphicon-plus:before { + content: "\002b"; } -.icon-chevron-left { - background-position: -432px -72px; +.glyphicon-minus:before { + content: "\2212"; } -.icon-chevron-right { - background-position: -456px -72px; +.glyphicon-asterisk:before { + content: "\002a"; } -.icon-plus-sign { - background-position: 0 -96px; +.glyphicon-exclamation-sign:before { + content: "\e101"; } -.icon-minus-sign { - background-position: -24px -96px; +.glyphicon-gift:before { + content: "\e102"; } -.icon-remove-sign { - background-position: -48px -96px; +.glyphicon-leaf:before { + content: "\e103"; } -.icon-ok-sign { - background-position: -72px -96px; +.glyphicon-fire:before { + content: "\e104"; } -.icon-question-sign { - background-position: -96px -96px; +.glyphicon-eye-open:before { + content: "\e105"; } -.icon-info-sign { - background-position: -120px -96px; +.glyphicon-eye-close:before { + content: "\e106"; } -.icon-screenshot { - background-position: -144px -96px; +.glyphicon-warning-sign:before { + content: "\e107"; } -.icon-remove-circle { - background-position: -168px -96px; +.glyphicon-plane:before { + content: "\e108"; } -.icon-ok-circle { - background-position: -192px -96px; +.glyphicon-calendar:before { + content: "\e109"; } -.icon-ban-circle { - background-position: -216px -96px; +.glyphicon-random:before { + content: "\e110"; } -.icon-arrow-left { - background-position: -240px -96px; +.glyphicon-comment:before { + content: "\e111"; } -.icon-arrow-right { - background-position: -264px -96px; +.glyphicon-magnet:before { + content: "\e112"; } -.icon-arrow-up { - background-position: -289px -96px; +.glyphicon-chevron-up:before { + content: "\e113"; } -.icon-arrow-down { - background-position: -312px -96px; +.glyphicon-chevron-down:before { + content: "\e114"; } -.icon-share-alt { - background-position: -336px -96px; +.glyphicon-retweet:before { + content: "\e115"; } -.icon-resize-full { - background-position: -360px -96px; +.glyphicon-shopping-cart:before { + content: "\e116"; } -.icon-resize-small { - background-position: -384px -96px; +.glyphicon-folder-close:before { + content: "\e117"; } -.icon-plus { - background-position: -408px -96px; +.glyphicon-folder-open:before { + content: "\e118"; } -.icon-minus { - background-position: -433px -96px; +.glyphicon-resize-vertical:before { + content: "\e119"; } -.icon-asterisk { - background-position: -456px -96px; +.glyphicon-resize-horizontal:before { + content: "\e120"; } -.icon-exclamation-sign { - background-position: 0 -120px; +.glyphicon-hdd:before { + content: "\e121"; } -.icon-gift { - background-position: -24px -120px; +.glyphicon-bullhorn:before { + content: "\e122"; } -.icon-leaf { - background-position: -48px -120px; +.glyphicon-bell:before { + content: "\e123"; } -.icon-fire { - background-position: -72px -120px; +.glyphicon-certificate:before { + content: "\e124"; } -.icon-eye-open { - background-position: -96px -120px; +.glyphicon-thumbs-up:before { + content: "\e125"; } -.icon-eye-close { - background-position: -120px -120px; +.glyphicon-thumbs-down:before { + content: "\e126"; } -.icon-warning-sign { - background-position: -144px -120px; +.glyphicon-hand-right:before { + content: "\e127"; } -.icon-plane { - background-position: -168px -120px; +.glyphicon-hand-left:before { + content: "\e128"; } -.icon-calendar { - background-position: -192px -120px; +.glyphicon-hand-up:before { + content: "\e129"; } -.icon-random { - width: 16px; - background-position: -216px -120px; +.glyphicon-hand-down:before { + content: "\e130"; } -.icon-comment { - background-position: -240px -120px; +.glyphicon-circle-arrow-right:before { + content: "\e131"; } -.icon-magnet { - background-position: -264px -120px; +.glyphicon-circle-arrow-left:before { + content: "\e132"; } -.icon-chevron-up { - background-position: -288px -120px; +.glyphicon-circle-arrow-up:before { + content: "\e133"; } -.icon-chevron-down { - background-position: -313px -119px; +.glyphicon-circle-arrow-down:before { + content: "\e134"; } -.icon-retweet { - background-position: -336px -120px; +.glyphicon-globe:before { + content: "\e135"; } -.icon-shopping-cart { - background-position: -360px -120px; +.glyphicon-wrench:before { + content: "\e136"; } -.icon-folder-close { - background-position: -384px -120px; +.glyphicon-tasks:before { + content: "\e137"; } -.icon-folder-open { - width: 16px; - background-position: -408px -120px; +.glyphicon-filter:before { + content: "\e138"; } -.icon-resize-vertical { - background-position: -432px -119px; +.glyphicon-briefcase:before { + content: "\e139"; } -.icon-resize-horizontal { - background-position: -456px -118px; +.glyphicon-fullscreen:before { + content: "\e140"; } -.icon-hdd { - background-position: 0 -144px; +.glyphicon-dashboard:before { + content: "\e141"; } -.icon-bullhorn { - background-position: -24px -144px; +.glyphicon-paperclip:before { + content: "\e142"; } -.icon-bell { - background-position: -48px -144px; +.glyphicon-heart-empty:before { + content: "\e143"; } -.icon-certificate { - background-position: -72px -144px; +.glyphicon-link:before { + content: "\e144"; } -.icon-thumbs-up { - background-position: -96px -144px; +.glyphicon-phone:before { + content: "\e145"; } -.icon-thumbs-down { - background-position: -120px -144px; +.glyphicon-pushpin:before { + content: "\e146"; } -.icon-hand-right { - background-position: -144px -144px; +.glyphicon-euro:before { + content: "\20ac"; } -.icon-hand-left { - background-position: -168px -144px; +.glyphicon-usd:before { + content: "\e148"; } -.icon-hand-up { - background-position: -192px -144px; +.glyphicon-gbp:before { + content: "\e149"; } -.icon-hand-down { - background-position: -216px -144px; +.glyphicon-sort:before { + content: "\e150"; } -.icon-circle-arrow-right { - background-position: -240px -144px; +.glyphicon-sort-by-alphabet:before { + content: "\e151"; } -.icon-circle-arrow-left { - background-position: -264px -144px; +.glyphicon-sort-by-alphabet-alt:before { + content: "\e152"; } -.icon-circle-arrow-up { - background-position: -288px -144px; +.glyphicon-sort-by-order:before { + content: "\e153"; } -.icon-circle-arrow-down { - background-position: -312px -144px; +.glyphicon-sort-by-order-alt:before { + content: "\e154"; } -.icon-globe { - background-position: -336px -144px; +.glyphicon-sort-by-attributes:before { + content: "\e155"; } -.icon-wrench { - background-position: -360px -144px; +.glyphicon-sort-by-attributes-alt:before { + content: "\e156"; } -.icon-tasks { - background-position: -384px -144px; +.glyphicon-unchecked:before { + content: "\e157"; } -.icon-filter { - background-position: -408px -144px; +.glyphicon-expand:before { + content: "\e158"; } -.icon-briefcase { - background-position: -432px -144px; +.glyphicon-collapse:before { + content: "\e159"; } -.icon-fullscreen { - background-position: -456px -144px; +.glyphicon-collapse-top:before { + content: "\e160"; } .dropup, @@ -2900,28 +2961,27 @@ 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; 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; border-radius: 3px; } +.btn [class^="glyphicon-"]::before { + vertical-align: -2px; +} + +.btn-small [class^="glyphicon-"]::before, +.btn-mini [class^="glyphicon-"]::before { + vertical-align: -1px; +} + .btn-block { display: block; width: 100%; @@ -4341,7 +4401,7 @@ input[type="button"].btn-block { .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 335d05a02c..c3fbf0c2c6 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -536,7 +536,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); } @@ -756,18 +760,19 @@ form.bs-docs-example { margin: 30px 0 0; } /* 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 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 0000000000..bd59ccd2d6 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 0000000000..b058f1cd1b 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 0000000000..0fb4587352 --- /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 0000000000..c63c068feb 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 0000000000..4c778ffdc5 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 3bf6484a29..0000000000 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 a996999320..0000000000 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 4a3e8459aa..6522fff597 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -84,13 +84,13 @@
@@ -1764,177 +1764,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
    • +
  • 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
    • -
  • 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
    • +
  • 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
    • -
  • 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
    • +
  • 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
    • -
  • 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
    • +
  • 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
    • -
  • 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

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:

+

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"></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 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.

@@ -1950,10 +1970,10 @@ For example, <code><section></code> should be wrapped as inlin
- - - - + + + +
@@ -1961,10 +1981,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> @@ -1972,12 +1992,12 @@ For example, <code><section></code> should be wrapped as inlin
Dropdown in a button group
- User + User @@ -1985,12 +2005,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>
@@ -1999,10 +2019,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>
 

 
 
@@ -2010,18 +2030,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>
 

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

                 

-                  
+
@@ -2042,7 +2062,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 6e8ee61190..c8085d9a74 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -15,13 +15,13 @@
@@ -1703,177 +1703,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
    • +
  • 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
    • -
  • 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
    • +
  • 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
    • -
  • 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
    • +
  • 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
    • -
  • 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
    • +
  • 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
    • -
  • 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

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}}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"></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 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}}

@@ -1889,10 +1909,10 @@
- - - - + + + +
{{! /bs-docs-example }} @@ -1900,10 +1920,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> @@ -1911,12 +1931,12 @@
{{_i}}Dropdown in a button group{{/i}}
- {{_i}}User{{/i}} + {{_i}}User{{/i}} @@ -1924,12 +1944,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>
@@ -1938,10 +1958,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>
 

 
 
@@ -1949,18 +1969,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>
 

@@ -1971,7 +1991,7 @@
               
               

                 

-                  
+
@@ -1981,7 +2001,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 0000000000..bd59ccd2d6 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 0000000000..b058f1cd1b 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 0000000000..0fb4587352 --- /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 0000000000..c63c068feb 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 0000000000..4c778ffdc5 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 3bf6484a29..0000000000 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 a996999320..0000000000 Binary files a/img/glyphicons-halflings.png and /dev/null differ diff --git a/less/bootstrap.less b/less/bootstrap.less index 532c4d2bb8..6346d53062 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 85eee44b0e..e93d4d603a 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -62,9 +62,8 @@ } - // Button Sizes -// -------------------------------------------------- +// ------------------------- // Large .btn-large { @@ -72,10 +71,6 @@ font-size: @fontSizeLarge; border-radius: @borderRadiusLarge; } -.btn-large [class^="icon-"], -.btn-large [class*=" icon-"] { - margin-top: 2px; -} // Small .btn-small { @@ -83,10 +78,6 @@ font-size: @fontSizeSmall; border-radius: @borderRadiusSmall; } -.btn-small [class^="icon-"], -.btn-small [class*=" icon-"] { - margin-top: 0; -} // Mini .btn-mini { @@ -96,6 +87,14 @@ } +// Icons in buttons +// ------------------------- + +.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 new file mode 100644 index 0000000000..ad22b45793 --- /dev/null +++ b/less/glyphicons.less @@ -0,0 +1,200 @@ +// +// 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 { + font-family: 'Glyphicons Halflings'; + font-style: normal; + line-height: 1; +} + +// 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 bb8147fa8e..0000000000 --- a/less/sprites.less +++ /dev/null @@ -1,192 +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; - 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 5fe7f664b7..add63b4c9f 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 b4c5a2580a..3ceb462bc8 100644 --- a/less/variables.less +++ b/less/variables.less @@ -66,7 +66,7 @@ @paddingLarge: 11px 19px; // 44px @paddingSmall: 2px 10px; // 26px -@paddingMini: 1px 6px; // 24px +@paddingMini: 0 6px; // 24px @baseBorderRadius: 4px; @borderRadiusLarge: 6px;