first pass at changing icon- to fa-

This commit is contained in:
davegandy 2013-09-30 20:16:19 -04:00
parent 495649eaea
commit 6ce5780b79
11 changed files with 2351 additions and 1551 deletions

View File

@ -26,6 +26,7 @@ fontawesome:
blog_url: http://blog.fontawesome.io blog_url: http://blog.fontawesome.io
twitter: fontawesome twitter: fontawesome
tagline: The iconic font designed for Bootstrap tagline: The iconic font designed for Bootstrap
css_prefix: fa
author: author:
name: Dave Gandy name: Dave Gandy
email: dave@fontawesome.io email: dave@fontawesome.io

922
css/font-awesome.css vendored

File diff suppressed because it is too large Load Diff

View File

@ -1,35 +1,35 @@
@font-face{font-family:'FontAwesome';src:url('../font/fontawesome-webfont.eot?v=4.0.0');src:url('../font/fontawesome-webfont.eot?#iefix&v=4.0.0') format('embedded-opentype'),url('../font/fontawesome-webfont.woff?v=4.0.0') format('woff'),url('../font/fontawesome-webfont.ttf?v=4.0.0') format('truetype'),url('../font/fontawesome-webfont.svg?v=4.0.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal;}[class^="icon-"],[class*=" icon-"]{*margin-right:.3em;font-family:FontAwesome;-webkit-font-smoothing:antialiased;font-style:normal;font-weight:normal;text-decoration:inherit;text-rendering:auto;-moz-osx-font-smoothing:grayscale;} @font-face{font-family:'FontAwesome';src:url('../font/fontawesome-webfont.eot?v=4.0.0');src:url('../font/fontawesome-webfont.eot?#iefix&v=4.0.0') format('embedded-opentype'),url('../font/fontawesome-webfont.woff?v=4.0.0') format('woff'),url('../font/fontawesome-webfont.ttf?v=4.0.0') format('truetype'),url('../font/fontawesome-webfont.svg?v=4.0.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal;}[class^="fa-"],[class*=" fa-"]{*margin-right:.3em;font-family:FontAwesome;-webkit-font-smoothing:antialiased;font-style:normal;font-weight:normal;text-decoration:inherit;text-rendering:auto;-moz-osx-font-smoothing:grayscale;}
[class^="icon-"]:before,[class*=" icon-"]:before{display:inline-block;text-decoration:inherit;speak:none;} [class^="fa-"]:before,[class*=" fa-"]:before{display:inline-block;text-decoration:inherit;speak:none;}
.icon-large:before{font-size:1.3333333333333333em;vertical-align:-10%;} .fa-large:before{font-size:1.3333333333333333em;vertical-align:-10%;}
a [class^="icon-"],a [class*=" icon-"]{display:inline;} a [class^="fa-"],a [class*=" fa-"]{display:inline;}
[class^="icon-"].icon-fixed-width,[class*=" icon-"].icon-fixed-width{display:inline-block;width:1.1428571428571428em;padding-right:0.2857142857142857em;text-align:right;}[class^="icon-"].icon-fixed-width.icon-large,[class*=" icon-"].icon-fixed-width.icon-large{width:1.4285714285714286em;} [class^="fa-"].fa-fixed-width,[class*=" fa-"].fa-fixed-width{display:inline-block;width:1.1428571428571428em;padding-right:0.2857142857142857em;text-align:right;}[class^="fa-"].fa-fixed-width.fa-large,[class*=" fa-"].fa-fixed-width.fa-large{width:1.4285714285714286em;}
.icons-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none;}.icons-ul>li{position:relative;} .fas-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none;}.fas-ul>li{position:relative;}
.icons-ul .icon-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;line-height:inherit;text-align:center;} .fas-ul .fa-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;line-height:inherit;text-align:center;}
[class^="icon-"].hide,[class*=" icon-"].hide{display:none;} [class^="fa-"].hide,[class*=" fa-"].hide{display:none;}
.icon-muted{color:#eeeeee;} .fa-muted{color:#eeeeee;}
.icon-light{color:#ffffff;} .fa-light{color:#ffffff;}
.icon-dark{color:#333333;} .fa-dark{color:#333333;}
.icon-border{padding:.2em .25em .15em;border:solid 1px #eeeeee;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} .fa-border{padding:.2em .25em .15em;border:solid 1px #eeeeee;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.icon-2x{font-size:2em;}.icon-2x.icon-border{border-width:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .fa-2x{font-size:2em;}.fa-2x.fa-border{border-width:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.icon-3x{font-size:3em;}.icon-3x.icon-border{border-width:3px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;} .fa-3x{font-size:3em;}.fa-3x.fa-border{border-width:3px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.icon-4x{font-size:4em;}.icon-4x.icon-border{border-width:4px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;} .fa-4x{font-size:4em;}.fa-4x.fa-border{border-width:4px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
.icon-5x{font-size:5em;}.icon-5x.icon-border{border-width:5px;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;} .fa-5x{font-size:5em;}.fa-5x.fa-border{border-width:5px;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;}
.pull-right{float:right;} .pull-right{float:right;}
.pull-left{float:left;} .pull-left{float:left;}
[class^="icon-"].pull-left,[class*=" icon-"].pull-left{margin-right:.3em;} [class^="fa-"].pull-left,[class*=" fa-"].pull-left{margin-right:.3em;}
[class^="icon-"].pull-right,[class*=" icon-"].pull-right{margin-left:.3em;} [class^="fa-"].pull-right,[class*=" fa-"].pull-right{margin-left:.3em;}
[class^="icon-"],[class*=" icon-"]{display:inline;width:auto;height:auto;margin-top:0;line-height:normal;vertical-align:baseline;background-image:none;background-position:0 0;background-repeat:repeat;} [class^="fa-"],[class*=" fa-"]{display:inline;width:auto;height:auto;margin-top:0;line-height:normal;vertical-align:baseline;background-image:none;background-position:0 0;background-repeat:repeat;}
.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:none;} .icon-white,.nav-pills>.active>a>[class^="fa-"],.nav-pills>.active>a>[class*=" fa-"],.nav-list>.active>a>[class^="fa-"],.nav-list>.active>a>[class*=" fa-"],.navbar-inverse .nav>.active>a>[class^="fa-"],.navbar-inverse .nav>.active>a>[class*=" fa-"],.dropdown-menu>li>a:hover>[class^="fa-"],.dropdown-menu>li>a:hover>[class*=" fa-"],.dropdown-menu>.active>a>[class^="fa-"],.dropdown-menu>.active>a>[class*=" fa-"],.dropdown-submenu:hover>a>[class^="fa-"],.dropdown-submenu:hover>a>[class*=" fa-"]{background-image:none;}
.btn [class^="icon-"].icon-large,.nav [class^="icon-"].icon-large,.btn [class*=" icon-"].icon-large,.nav [class*=" icon-"].icon-large{line-height:.9em;} .btn [class^="fa-"].fa-large,.nav [class^="fa-"].fa-large,.btn [class*=" fa-"].fa-large,.nav [class*=" fa-"].fa-large{line-height:.9em;}
.btn [class^="icon-"].icon-spin,.nav [class^="icon-"].icon-spin,.btn [class*=" icon-"].icon-spin,.nav [class*=" icon-"].icon-spin{display:inline-block;} .btn [class^="fa-"].fa-spin,.nav [class^="fa-"].fa-spin,.btn [class*=" fa-"].fa-spin,.nav [class*=" fa-"].fa-spin{display:inline-block;}
.nav-tabs [class^="icon-"],.nav-pills [class^="icon-"],.nav-tabs [class*=" icon-"],.nav-pills [class*=" icon-"],.nav-tabs [class^="icon-"].icon-large,.nav-pills [class^="icon-"].icon-large,.nav-tabs [class*=" icon-"].icon-large,.nav-pills [class*=" icon-"].icon-large{line-height:.9em;} .nav-tabs [class^="fa-"],.nav-pills [class^="fa-"],.nav-tabs [class*=" fa-"],.nav-pills [class*=" fa-"],.nav-tabs [class^="fa-"].fa-large,.nav-pills [class^="fa-"].fa-large,.nav-tabs [class*=" fa-"].fa-large,.nav-pills [class*=" fa-"].fa-large{line-height:.9em;}
.btn [class^="icon-"].pull-left.icon-2x,.btn [class*=" icon-"].pull-left.icon-2x,.btn [class^="icon-"].pull-right.icon-2x,.btn [class*=" icon-"].pull-right.icon-2x{margin-top:.18em;} .btn [class^="fa-"].pull-left.fa-2x,.btn [class*=" fa-"].pull-left.fa-2x,.btn [class^="fa-"].pull-right.fa-2x,.btn [class*=" fa-"].pull-right.fa-2x{margin-top:.18em;}
.btn [class^="icon-"].icon-spin.icon-large,.btn [class*=" icon-"].icon-spin.icon-large{line-height:.8em;} .btn [class^="fa-"].fa-spin.fa-large,.btn [class*=" fa-"].fa-spin.fa-large{line-height:.8em;}
.btn.btn-small [class^="icon-"].pull-left.icon-2x,.btn.btn-small [class*=" icon-"].pull-left.icon-2x,.btn.btn-small [class^="icon-"].pull-right.icon-2x,.btn.btn-small [class*=" icon-"].pull-right.icon-2x{margin-top:.25em;} .btn.btn-small [class^="fa-"].pull-left.fa-2x,.btn.btn-small [class*=" fa-"].pull-left.fa-2x,.btn.btn-small [class^="fa-"].pull-right.fa-2x,.btn.btn-small [class*=" fa-"].pull-right.fa-2x{margin-top:.25em;}
.btn.btn-large [class^="icon-"],.btn.btn-large [class*=" icon-"]{margin-top:0;}.btn.btn-large [class^="icon-"].pull-left.icon-2x,.btn.btn-large [class*=" icon-"].pull-left.icon-2x,.btn.btn-large [class^="icon-"].pull-right.icon-2x,.btn.btn-large [class*=" icon-"].pull-right.icon-2x{margin-top:.05em;} .btn.btn-large [class^="fa-"],.btn.btn-large [class*=" fa-"]{margin-top:0;}.btn.btn-large [class^="fa-"].pull-left.fa-2x,.btn.btn-large [class*=" fa-"].pull-left.fa-2x,.btn.btn-large [class^="fa-"].pull-right.fa-2x,.btn.btn-large [class*=" fa-"].pull-right.fa-2x{margin-top:.05em;}
.btn.btn-large [class^="icon-"].pull-left.icon-2x,.btn.btn-large [class*=" icon-"].pull-left.icon-2x{margin-right:.2em;} .btn.btn-large [class^="fa-"].pull-left.fa-2x,.btn.btn-large [class*=" fa-"].pull-left.fa-2x{margin-right:.2em;}
.btn.btn-large [class^="icon-"].pull-right.icon-2x,.btn.btn-large [class*=" icon-"].pull-right.icon-2x{margin-left:.2em;} .btn.btn-large [class^="fa-"].pull-right.fa-2x,.btn.btn-large [class*=" fa-"].pull-right.fa-2x{margin-left:.2em;}
.nav-list [class^="icon-"],.nav-list [class*=" icon-"]{line-height:inherit;} .nav-list [class^="fa-"],.nav-list [class*=" fa-"]{line-height:inherit;}
.icon-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:-35%;}.icon-stack [class^="icon-"],.icon-stack [class*=" icon-"]{position:absolute;display:block;width:100%;height:100%;font-size:1em;line-height:inherit;*line-height:2em;text-align:center;} .icon-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:-35%;}.icon-stack [class^="icon-"],.icon-stack [class*=" icon-"]{position:absolute;display:block;width:100%;height:100%;font-size:1em;line-height:inherit;*line-height:2em;text-align:center;}
.icon-stack .icon-stack-base{font-size:2em;*line-height:1em;} .icon-stack .icon-stack-base{font-size:2em;*line-height:1em;}
.icon-spin{display:inline-block;-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear;} .icon-spin{display:inline-block;-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear;}
@ -40,364 +40,364 @@ a .icon-stack,a .icon-spin{display:inline-block;text-decoration:none;}
.icon-flip-horizontal:before{-webkit-transform:scale(-1, 1);-moz-transform:scale(-1, 1);-ms-transform:scale(-1, 1);-o-transform:scale(-1, 1);transform:scale(-1, 1);} .icon-flip-horizontal:before{-webkit-transform:scale(-1, 1);-moz-transform:scale(-1, 1);-ms-transform:scale(-1, 1);-o-transform:scale(-1, 1);transform:scale(-1, 1);}
.icon-flip-vertical:before{-webkit-transform:scale(1, -1);-moz-transform:scale(1, -1);-ms-transform:scale(1, -1);-o-transform:scale(1, -1);transform:scale(1, -1);} .icon-flip-vertical:before{-webkit-transform:scale(1, -1);-moz-transform:scale(1, -1);-ms-transform:scale(1, -1);-o-transform:scale(1, -1);transform:scale(1, -1);}
a .icon-rotate-90:before,a .icon-rotate-180:before,a .icon-rotate-270:before,a .icon-flip-horizontal:before,a .icon-flip-vertical:before{display:inline-block;} a .icon-rotate-90:before,a .icon-rotate-180:before,a .icon-rotate-270:before,a .icon-flip-horizontal:before,a .icon-flip-vertical:before{display:inline-block;}
.icon-glass:before{content:"\f000";} .fa-glass:before{content:"\f000";}
.icon-music:before{content:"\f001";} .fa-music:before{content:"\f001";}
.icon-search:before{content:"\f002";} .fa-search:before{content:"\f002";}
.icon-envelope-alt:before{content:"\f003";} .fa-envelope-alt:before{content:"\f003";}
.icon-heart:before{content:"\f004";} .fa-heart:before{content:"\f004";}
.icon-star:before{content:"\f005";} .fa-star:before{content:"\f005";}
.icon-star-empty:before{content:"\f006";} .fa-star-empty:before{content:"\f006";}
.icon-user:before{content:"\f007";} .fa-user:before{content:"\f007";}
.icon-film:before{content:"\f008";} .fa-film:before{content:"\f008";}
.icon-th-large:before{content:"\f009";} .fa-th-large:before{content:"\f009";}
.icon-th:before{content:"\f00a";} .fa-th:before{content:"\f00a";}
.icon-th-list:before{content:"\f00b";} .fa-th-list:before{content:"\f00b";}
.icon-ok:before{content:"\f00c";} .fa-ok:before{content:"\f00c";}
.icon-remove:before{content:"\f00d";} .fa-remove:before{content:"\f00d";}
.icon-zoom-in:before{content:"\f00e";} .fa-zoom-in:before{content:"\f00e";}
.icon-zoom-out:before{content:"\f010";} .fa-zoom-out:before{content:"\f010";}
.icon-power-off:before,.icon-off:before{content:"\f011";} .fa-power-off:before,.fa-off:before{content:"\f011";}
.icon-signal:before{content:"\f012";} .fa-signal:before{content:"\f012";}
.icon-gear:before,.icon-cog:before{content:"\f013";} .fa-gear:before,.fa-cog:before{content:"\f013";}
.icon-trash:before{content:"\f014";} .fa-trash:before{content:"\f014";}
.icon-home:before{content:"\f015";} .fa-home:before{content:"\f015";}
.icon-file-alt:before{content:"\f016";} .fa-file-alt:before{content:"\f016";}
.icon-time:before{content:"\f017";} .fa-time:before{content:"\f017";}
.icon-road:before{content:"\f018";} .fa-road:before{content:"\f018";}
.icon-download-alt:before{content:"\f019";} .fa-download-alt:before{content:"\f019";}
.icon-download:before{content:"\f01a";} .fa-download:before{content:"\f01a";}
.icon-upload:before{content:"\f01b";} .fa-upload:before{content:"\f01b";}
.icon-inbox:before{content:"\f01c";} .fa-inbox:before{content:"\f01c";}
.icon-play-circle:before{content:"\f01d";} .fa-play-circle:before{content:"\f01d";}
.icon-rotate-right:before,.icon-repeat:before{content:"\f01e";} .fa-rotate-right:before,.fa-repeat:before{content:"\f01e";}
.icon-refresh:before{content:"\f021";} .fa-refresh:before{content:"\f021";}
.icon-list-alt:before{content:"\f022";} .fa-list-alt:before{content:"\f022";}
.icon-lock:before{content:"\f023";} .fa-lock:before{content:"\f023";}
.icon-flag:before{content:"\f024";} .fa-flag:before{content:"\f024";}
.icon-headphones:before{content:"\f025";} .fa-headphones:before{content:"\f025";}
.icon-volume-off:before{content:"\f026";} .fa-volume-off:before{content:"\f026";}
.icon-volume-down:before{content:"\f027";} .fa-volume-down:before{content:"\f027";}
.icon-volume-up:before{content:"\f028";} .fa-volume-up:before{content:"\f028";}
.icon-qrcode:before{content:"\f029";} .fa-qrcode:before{content:"\f029";}
.icon-barcode:before{content:"\f02a";} .fa-barcode:before{content:"\f02a";}
.icon-tag:before{content:"\f02b";} .fa-tag:before{content:"\f02b";}
.icon-tags:before{content:"\f02c";} .fa-tags:before{content:"\f02c";}
.icon-book:before{content:"\f02d";} .fa-book:before{content:"\f02d";}
.icon-bookmark:before{content:"\f02e";} .fa-bookmark:before{content:"\f02e";}
.icon-print:before{content:"\f02f";} .fa-print:before{content:"\f02f";}
.icon-camera:before{content:"\f030";} .fa-camera:before{content:"\f030";}
.icon-font:before{content:"\f031";} .fa-font:before{content:"\f031";}
.icon-bold:before{content:"\f032";} .fa-bold:before{content:"\f032";}
.icon-italic:before{content:"\f033";} .fa-italic:before{content:"\f033";}
.icon-text-height:before{content:"\f034";} .fa-text-height:before{content:"\f034";}
.icon-text-width:before{content:"\f035";} .fa-text-width:before{content:"\f035";}
.icon-align-left:before{content:"\f036";} .fa-align-left:before{content:"\f036";}
.icon-align-center:before{content:"\f037";} .fa-align-center:before{content:"\f037";}
.icon-align-right:before{content:"\f038";} .fa-align-right:before{content:"\f038";}
.icon-align-justify:before{content:"\f039";} .fa-align-justify:before{content:"\f039";}
.icon-list:before{content:"\f03a";} .fa-list:before{content:"\f03a";}
.icon-indent-left:before{content:"\f03b";} .fa-indent-left:before{content:"\f03b";}
.icon-indent-right:before{content:"\f03c";} .fa-indent-right:before{content:"\f03c";}
.icon-facetime-video:before{content:"\f03d";} .fa-facetime-video:before{content:"\f03d";}
.icon-picture:before{content:"\f03e";} .fa-picture:before{content:"\f03e";}
.icon-pencil:before{content:"\f040";} .fa-pencil:before{content:"\f040";}
.icon-map-marker:before{content:"\f041";} .fa-map-marker:before{content:"\f041";}
.icon-adjust:before{content:"\f042";} .fa-adjust:before{content:"\f042";}
.icon-tint:before{content:"\f043";} .fa-tint:before{content:"\f043";}
.icon-edit:before{content:"\f044";} .fa-edit:before{content:"\f044";}
.icon-share:before{content:"\f045";} .fa-share:before{content:"\f045";}
.icon-check:before{content:"\f046";} .fa-check:before{content:"\f046";}
.icon-move:before{content:"\f047";} .fa-move:before{content:"\f047";}
.icon-step-backward:before{content:"\f048";} .fa-step-backward:before{content:"\f048";}
.icon-fast-backward:before{content:"\f049";} .fa-fast-backward:before{content:"\f049";}
.icon-backward:before{content:"\f04a";} .fa-backward:before{content:"\f04a";}
.icon-play:before{content:"\f04b";} .fa-play:before{content:"\f04b";}
.icon-pause:before{content:"\f04c";} .fa-pause:before{content:"\f04c";}
.icon-stop:before{content:"\f04d";} .fa-stop:before{content:"\f04d";}
.icon-forward:before{content:"\f04e";} .fa-forward:before{content:"\f04e";}
.icon-fast-forward:before{content:"\f050";} .fa-fast-forward:before{content:"\f050";}
.icon-step-forward:before{content:"\f051";} .fa-step-forward:before{content:"\f051";}
.icon-eject:before{content:"\f052";} .fa-eject:before{content:"\f052";}
.icon-chevron-left:before{content:"\f053";} .fa-chevron-left:before{content:"\f053";}
.icon-chevron-right:before{content:"\f054";} .fa-chevron-right:before{content:"\f054";}
.icon-plus-sign:before{content:"\f055";} .fa-plus-sign:before{content:"\f055";}
.icon-minus-sign:before{content:"\f056";} .fa-minus-sign:before{content:"\f056";}
.icon-remove-sign:before{content:"\f057";} .fa-remove-sign:before{content:"\f057";}
.icon-ok-sign:before{content:"\f058";} .fa-ok-sign:before{content:"\f058";}
.icon-question-sign:before{content:"\f059";} .fa-question-sign:before{content:"\f059";}
.icon-info-sign:before{content:"\f05a";} .fa-info-sign:before{content:"\f05a";}
.icon-screenshot:before{content:"\f05b";} .fa-screenshot:before{content:"\f05b";}
.icon-remove-circle:before{content:"\f05c";} .fa-remove-circle:before{content:"\f05c";}
.icon-ok-circle:before{content:"\f05d";} .fa-ok-circle:before{content:"\f05d";}
.icon-ban-circle:before{content:"\f05e";} .fa-ban-circle:before{content:"\f05e";}
.icon-arrow-left:before{content:"\f060";} .fa-arrow-left:before{content:"\f060";}
.icon-arrow-right:before{content:"\f061";} .fa-arrow-right:before{content:"\f061";}
.icon-arrow-up:before{content:"\f062";} .fa-arrow-up:before{content:"\f062";}
.icon-arrow-down:before{content:"\f063";} .fa-arrow-down:before{content:"\f063";}
.icon-mail-forward:before,.icon-share-alt:before{content:"\f064";} .fa-mail-forward:before,.fa-share-alt:before{content:"\f064";}
.icon-resize-full:before{content:"\f065";} .fa-resize-full:before{content:"\f065";}
.icon-resize-small:before{content:"\f066";} .fa-resize-small:before{content:"\f066";}
.icon-plus:before{content:"\f067";} .fa-plus:before{content:"\f067";}
.icon-minus:before{content:"\f068";} .fa-minus:before{content:"\f068";}
.icon-asterisk:before{content:"\f069";} .fa-asterisk:before{content:"\f069";}
.icon-exclamation-sign:before{content:"\f06a";} .fa-exclamation-sign:before{content:"\f06a";}
.icon-gift:before{content:"\f06b";} .fa-gift:before{content:"\f06b";}
.icon-leaf:before{content:"\f06c";} .fa-leaf:before{content:"\f06c";}
.icon-fire:before{content:"\f06d";} .fa-fire:before{content:"\f06d";}
.icon-eye-open:before{content:"\f06e";} .fa-eye-open:before{content:"\f06e";}
.icon-eye-close:before{content:"\f070";} .fa-eye-close:before{content:"\f070";}
.icon-warning-sign:before{content:"\f071";} .fa-warning-sign:before{content:"\f071";}
.icon-plane:before{content:"\f072";} .fa-plane:before{content:"\f072";}
.icon-calendar:before{content:"\f073";} .fa-calendar:before{content:"\f073";}
.icon-random:before{content:"\f074";} .fa-random:before{content:"\f074";}
.icon-comment:before{content:"\f075";} .fa-comment:before{content:"\f075";}
.icon-magnet:before{content:"\f076";} .fa-magnet:before{content:"\f076";}
.icon-chevron-up:before{content:"\f077";} .fa-chevron-up:before{content:"\f077";}
.icon-chevron-down:before{content:"\f078";} .fa-chevron-down:before{content:"\f078";}
.icon-retweet:before{content:"\f079";} .fa-retweet:before{content:"\f079";}
.icon-shopping-cart:before{content:"\f07a";} .fa-shopping-cart:before{content:"\f07a";}
.icon-folder-close:before{content:"\f07b";} .fa-folder-close:before{content:"\f07b";}
.icon-folder-open:before{content:"\f07c";} .fa-folder-open:before{content:"\f07c";}
.icon-resize-vertical:before{content:"\f07d";} .fa-resize-vertical:before{content:"\f07d";}
.icon-resize-horizontal:before{content:"\f07e";} .fa-resize-horizontal:before{content:"\f07e";}
.icon-bar-chart:before{content:"\f080";} .fa-bar-chart:before{content:"\f080";}
.icon-twitter-sign:before{content:"\f081";} .fa-twitter-sign:before{content:"\f081";}
.icon-facebook-sign:before{content:"\f082";} .fa-facebook-sign:before{content:"\f082";}
.icon-camera-retro:before{content:"\f083";} .fa-camera-retro:before{content:"\f083";}
.icon-key:before{content:"\f084";} .fa-key:before{content:"\f084";}
.icon-gears:before,.icon-cogs:before{content:"\f085";} .fa-gears:before,.fa-cogs:before{content:"\f085";}
.icon-comments:before{content:"\f086";} .fa-comments:before{content:"\f086";}
.icon-thumbs-up-alt:before{content:"\f087";} .fa-thumbs-up-alt:before{content:"\f087";}
.icon-thumbs-down-alt:before{content:"\f088";} .fa-thumbs-down-alt:before{content:"\f088";}
.icon-star-half:before{content:"\f089";} .fa-star-half:before{content:"\f089";}
.icon-heart-empty:before{content:"\f08a";} .fa-heart-empty:before{content:"\f08a";}
.icon-log-out:before{content:"\f08b";} .fa-log-out:before{content:"\f08b";}
.icon-linkedin-sign:before{content:"\f08c";} .fa-linkedin-sign:before{content:"\f08c";}
.icon-pushpin:before{content:"\f08d";} .fa-pushpin:before{content:"\f08d";}
.icon-external-link:before{content:"\f08e";} .fa-external-link:before{content:"\f08e";}
.icon-log-in:before{content:"\f090";} .fa-log-in:before{content:"\f090";}
.icon-trophy:before{content:"\f091";} .fa-trophy:before{content:"\f091";}
.icon-github-sign:before{content:"\f092";} .fa-github-sign:before{content:"\f092";}
.icon-upload-alt:before{content:"\f093";} .fa-upload-alt:before{content:"\f093";}
.icon-lemon:before{content:"\f094";} .fa-lemon:before{content:"\f094";}
.icon-earphone:before{content:"\f095";} .fa-earphone:before{content:"\f095";}
.icon-unchecked:before{content:"\f096";} .fa-unchecked:before{content:"\f096";}
.icon-bookmark-empty:before{content:"\f097";} .fa-bookmark-empty:before{content:"\f097";}
.icon-phone-sign:before{content:"\f098";} .fa-phone-sign:before{content:"\f098";}
.icon-twitter:before{content:"\f099";} .fa-twitter:before{content:"\f099";}
.icon-facebook:before{content:"\f09a";} .fa-facebook:before{content:"\f09a";}
.icon-github:before{content:"\f09b";} .fa-github:before{content:"\f09b";}
.icon-unlock:before{content:"\f09c";} .fa-unlock:before{content:"\f09c";}
.icon-credit-card:before{content:"\f09d";} .fa-credit-card:before{content:"\f09d";}
.icon-rss:before{content:"\f09e";} .fa-rss:before{content:"\f09e";}
.icon-hdd:before{content:"\f0a0";} .fa-hdd:before{content:"\f0a0";}
.icon-bullhorn:before{content:"\f0a1";} .fa-bullhorn:before{content:"\f0a1";}
.icon-bell:before{content:"\f0f3";} .fa-bell:before{content:"\f0f3";}
.icon-certificate:before{content:"\f0a3";} .fa-certificate:before{content:"\f0a3";}
.icon-hand-right:before{content:"\f0a4";} .fa-hand-right:before{content:"\f0a4";}
.icon-hand-left:before{content:"\f0a5";} .fa-hand-left:before{content:"\f0a5";}
.icon-hand-up:before{content:"\f0a6";} .fa-hand-up:before{content:"\f0a6";}
.icon-hand-down:before{content:"\f0a7";} .fa-hand-down:before{content:"\f0a7";}
.icon-circle-arrow-left:before{content:"\f0a8";} .fa-circle-arrow-left:before{content:"\f0a8";}
.icon-circle-arrow-right:before{content:"\f0a9";} .fa-circle-arrow-right:before{content:"\f0a9";}
.icon-circle-arrow-up:before{content:"\f0aa";} .fa-circle-arrow-up:before{content:"\f0aa";}
.icon-circle-arrow-down:before{content:"\f0ab";} .fa-circle-arrow-down:before{content:"\f0ab";}
.icon-globe:before{content:"\f0ac";} .fa-globe:before{content:"\f0ac";}
.icon-wrench:before{content:"\f0ad";} .fa-wrench:before{content:"\f0ad";}
.icon-tasks:before{content:"\f0ae";} .fa-tasks:before{content:"\f0ae";}
.icon-filter:before{content:"\f0b0";} .fa-filter:before{content:"\f0b0";}
.icon-briefcase:before{content:"\f0b1";} .fa-briefcase:before{content:"\f0b1";}
.icon-fullscreen:before{content:"\f0b2";} .fa-fullscreen:before{content:"\f0b2";}
.icon-group:before{content:"\f0c0";} .fa-group:before{content:"\f0c0";}
.icon-link:before{content:"\f0c1";} .fa-link:before{content:"\f0c1";}
.icon-cloud:before{content:"\f0c2";} .fa-cloud:before{content:"\f0c2";}
.icon-beaker:before{content:"\f0c3";} .fa-beaker:before{content:"\f0c3";}
.icon-cut:before{content:"\f0c4";} .fa-cut:before{content:"\f0c4";}
.icon-copy:before{content:"\f0c5";} .fa-copy:before{content:"\f0c5";}
.icon-paperclip:before{content:"\f0c6";} .fa-paperclip:before{content:"\f0c6";}
.icon-floppy-disk:before{content:"\f0c7";} .fa-floppy-disk:before{content:"\f0c7";}
.icon-sign-blank:before{content:"\f0c8";} .fa-sign-blank:before{content:"\f0c8";}
.icon-reorder:before{content:"\f0c9";} .fa-reorder:before{content:"\f0c9";}
.icon-list-ul:before{content:"\f0ca";} .fa-list-ul:before{content:"\f0ca";}
.icon-list-ol:before{content:"\f0cb";} .fa-list-ol:before{content:"\f0cb";}
.icon-strikethrough:before{content:"\f0cc";} .fa-strikethrough:before{content:"\f0cc";}
.icon-underline:before{content:"\f0cd";} .fa-underline:before{content:"\f0cd";}
.icon-table:before{content:"\f0ce";} .fa-table:before{content:"\f0ce";}
.icon-magic:before{content:"\f0d0";} .fa-magic:before{content:"\f0d0";}
.icon-truck:before{content:"\f0d1";} .fa-truck:before{content:"\f0d1";}
.icon-pinterest:before{content:"\f0d2";} .fa-pinterest:before{content:"\f0d2";}
.icon-pinterest-sign:before{content:"\f0d3";} .fa-pinterest-sign:before{content:"\f0d3";}
.icon-google-plus-sign:before{content:"\f0d4";} .fa-google-plus-sign:before{content:"\f0d4";}
.icon-google-plus:before{content:"\f0d5";} .fa-google-plus:before{content:"\f0d5";}
.icon-money:before{content:"\f0d6";} .fa-money:before{content:"\f0d6";}
.icon-caret-down:before{content:"\f0d7";} .fa-caret-down:before{content:"\f0d7";}
.icon-caret-up:before{content:"\f0d8";} .fa-caret-up:before{content:"\f0d8";}
.icon-caret-left:before{content:"\f0d9";} .fa-caret-left:before{content:"\f0d9";}
.icon-caret-right:before{content:"\f0da";} .fa-caret-right:before{content:"\f0da";}
.icon-columns:before{content:"\f0db";} .fa-columns:before{content:"\f0db";}
.icon-sort:before{content:"\f0dc";} .fa-sort:before{content:"\f0dc";}
.icon-sort-down:before{content:"\f0dd";} .fa-sort-down:before{content:"\f0dd";}
.icon-sort-up:before{content:"\f0de";} .fa-sort-up:before{content:"\f0de";}
.icon-envelope:before{content:"\f0e0";} .fa-envelope:before{content:"\f0e0";}
.icon-linkedin:before{content:"\f0e1";} .fa-linkedin:before{content:"\f0e1";}
.icon-rotate-left:before,.icon-undo:before{content:"\f0e2";} .fa-rotate-left:before,.fa-undo:before{content:"\f0e2";}
.icon-legal:before{content:"\f0e3";} .fa-legal:before{content:"\f0e3";}
.icon-dashboard:before{content:"\f0e4";} .fa-dashboard:before{content:"\f0e4";}
.icon-comment-alt:before{content:"\f0e5";} .fa-comment-alt:before{content:"\f0e5";}
.icon-comments-alt:before{content:"\f0e6";} .fa-comments-alt:before{content:"\f0e6";}
.icon-flash:before{content:"\f0e7";} .fa-flash:before{content:"\f0e7";}
.icon-sitemap:before{content:"\f0e8";} .fa-sitemap:before{content:"\f0e8";}
.icon-umbrella:before{content:"\f0e9";} .fa-umbrella:before{content:"\f0e9";}
.icon-paste:before{content:"\f0ea";} .fa-paste:before{content:"\f0ea";}
.icon-lightbulb:before{content:"\f0eb";} .fa-lightbulb:before{content:"\f0eb";}
.icon-exchange:before{content:"\f0ec";} .fa-exchange:before{content:"\f0ec";}
.icon-cloud-download:before{content:"\f0ed";} .fa-cloud-download:before{content:"\f0ed";}
.icon-cloud-upload:before{content:"\f0ee";} .fa-cloud-upload:before{content:"\f0ee";}
.icon-user-md:before{content:"\f0f0";} .fa-user-md:before{content:"\f0f0";}
.icon-stethoscope:before{content:"\f0f1";} .fa-stethoscope:before{content:"\f0f1";}
.icon-suitcase:before{content:"\f0f2";} .fa-suitcase:before{content:"\f0f2";}
.icon-bell-alt:before{content:"\f0a2";} .fa-bell-alt:before{content:"\f0a2";}
.icon-coffee:before{content:"\f0f4";} .fa-coffee:before{content:"\f0f4";}
.icon-cutlery:before{content:"\f0f5";} .fa-cutlery:before{content:"\f0f5";}
.icon-file-text-alt:before{content:"\f0f6";} .fa-file-text-alt:before{content:"\f0f6";}
.icon-building:before{content:"\f0f7";} .fa-building:before{content:"\f0f7";}
.icon-hospital:before{content:"\f0f8";} .fa-hospital:before{content:"\f0f8";}
.icon-ambulance:before{content:"\f0f9";} .fa-ambulance:before{content:"\f0f9";}
.icon-medkit:before{content:"\f0fa";} .fa-medkit:before{content:"\f0fa";}
.icon-fighter-jet:before{content:"\f0fb";} .fa-fighter-jet:before{content:"\f0fb";}
.icon-beer:before{content:"\f0fc";} .fa-beer:before{content:"\f0fc";}
.icon-h-sign:before{content:"\f0fd";} .fa-h-sign:before{content:"\f0fd";}
.icon-plus-sign-alt:before{content:"\f0fe";} .fa-plus-sign-alt:before{content:"\f0fe";}
.icon-double-angle-left:before{content:"\f100";} .fa-double-angle-left:before{content:"\f100";}
.icon-double-angle-right:before{content:"\f101";} .fa-double-angle-right:before{content:"\f101";}
.icon-double-angle-up:before{content:"\f102";} .fa-double-angle-up:before{content:"\f102";}
.icon-double-angle-down:before{content:"\f103";} .fa-double-angle-down:before{content:"\f103";}
.icon-angle-left:before{content:"\f104";} .fa-angle-left:before{content:"\f104";}
.icon-angle-right:before{content:"\f105";} .fa-angle-right:before{content:"\f105";}
.icon-angle-up:before{content:"\f106";} .fa-angle-up:before{content:"\f106";}
.icon-angle-down:before{content:"\f107";} .fa-angle-down:before{content:"\f107";}
.icon-desktop:before{content:"\f108";} .fa-desktop:before{content:"\f108";}
.icon-laptop:before{content:"\f109";} .fa-laptop:before{content:"\f109";}
.icon-tablet:before{content:"\f10a";} .fa-tablet:before{content:"\f10a";}
.icon-phone:before{content:"\f10b";} .fa-phone:before{content:"\f10b";}
.icon-circle-blank:before{content:"\f10c";} .fa-circle-blank:before{content:"\f10c";}
.icon-quote-left:before{content:"\f10d";} .fa-quote-left:before{content:"\f10d";}
.icon-quote-right:before{content:"\f10e";} .fa-quote-right:before{content:"\f10e";}
.icon-spinner:before{content:"\f110";} .fa-spinner:before{content:"\f110";}
.icon-circle:before{content:"\f111";} .fa-circle:before{content:"\f111";}
.icon-mail-reply:before,.icon-reply:before{content:"\f112";} .fa-mail-reply:before,.fa-reply:before{content:"\f112";}
.icon-github-alt:before{content:"\f113";} .fa-github-alt:before{content:"\f113";}
.icon-folder-close-alt:before{content:"\f114";} .fa-folder-close-alt:before{content:"\f114";}
.icon-folder-open-alt:before{content:"\f115";} .fa-folder-open-alt:before{content:"\f115";}
.icon-expand-alt:before{content:"\f116";} .fa-expand-alt:before{content:"\f116";}
.icon-collapse-alt:before{content:"\f117";} .fa-collapse-alt:before{content:"\f117";}
.icon-smile:before{content:"\f118";} .fa-smile:before{content:"\f118";}
.icon-frown:before{content:"\f119";} .fa-frown:before{content:"\f119";}
.icon-meh:before{content:"\f11a";} .fa-meh:before{content:"\f11a";}
.icon-gamepad:before{content:"\f11b";} .fa-gamepad:before{content:"\f11b";}
.icon-keyboard:before{content:"\f11c";} .fa-keyboard:before{content:"\f11c";}
.icon-flag-alt:before{content:"\f11d";} .fa-flag-alt:before{content:"\f11d";}
.icon-flag-checkered:before{content:"\f11e";} .fa-flag-checkered:before{content:"\f11e";}
.icon-terminal:before{content:"\f120";} .fa-terminal:before{content:"\f120";}
.icon-code:before{content:"\f121";} .fa-code:before{content:"\f121";}
.icon-reply-all:before{content:"\f122";} .fa-reply-all:before{content:"\f122";}
.icon-mail-reply-all:before{content:"\f122";} .fa-mail-reply-all:before{content:"\f122";}
.icon-star-half-full:before,.icon-star-half-empty:before{content:"\f123";} .fa-star-half-full:before,.fa-star-half-empty:before{content:"\f123";}
.icon-location-arrow:before{content:"\f124";} .fa-location-arrow:before{content:"\f124";}
.icon-crop:before{content:"\f125";} .fa-crop:before{content:"\f125";}
.icon-code-fork:before{content:"\f126";} .fa-code-fork:before{content:"\f126";}
.icon-unlink:before{content:"\f127";} .fa-unlink:before{content:"\f127";}
.icon-question:before{content:"\f128";} .fa-question:before{content:"\f128";}
.icon-info:before{content:"\f129";} .fa-info:before{content:"\f129";}
.icon-exclamation:before{content:"\f12a";} .fa-exclamation:before{content:"\f12a";}
.icon-superscript:before{content:"\f12b";} .fa-superscript:before{content:"\f12b";}
.icon-subscript:before{content:"\f12c";} .fa-subscript:before{content:"\f12c";}
.icon-eraser:before{content:"\f12d";} .fa-eraser:before{content:"\f12d";}
.icon-puzzle-piece:before{content:"\f12e";} .fa-puzzle-piece:before{content:"\f12e";}
.icon-microphone:before{content:"\f130";} .fa-microphone:before{content:"\f130";}
.icon-microphone-off:before{content:"\f131";} .fa-microphone-off:before{content:"\f131";}
.icon-shield:before{content:"\f132";} .fa-shield:before{content:"\f132";}
.icon-calendar-empty:before{content:"\f133";} .fa-calendar-empty:before{content:"\f133";}
.icon-fire-extinguisher:before{content:"\f134";} .fa-fire-extinguisher:before{content:"\f134";}
.icon-rocket:before{content:"\f135";} .fa-rocket:before{content:"\f135";}
.icon-maxcdn:before{content:"\f136";} .fa-maxcdn:before{content:"\f136";}
.icon-chevron-sign-left:before{content:"\f137";} .fa-chevron-sign-left:before{content:"\f137";}
.icon-chevron-sign-right:before{content:"\f138";} .fa-chevron-sign-right:before{content:"\f138";}
.icon-chevron-sign-up:before{content:"\f139";} .fa-chevron-sign-up:before{content:"\f139";}
.icon-chevron-sign-down:before{content:"\f13a";} .fa-chevron-sign-down:before{content:"\f13a";}
.icon-html5:before{content:"\f13b";} .fa-html5:before{content:"\f13b";}
.icon-css3:before{content:"\f13c";} .fa-css3:before{content:"\f13c";}
.icon-anchor:before{content:"\f13d";} .fa-anchor:before{content:"\f13d";}
.icon-unlock-alt:before{content:"\f13e";} .fa-unlock-alt:before{content:"\f13e";}
.icon-bullseye:before{content:"\f140";} .fa-bullseye:before{content:"\f140";}
.icon-ellipsis-horizontal:before{content:"\f141";} .fa-ellipsis-horizontal:before{content:"\f141";}
.icon-ellipsis-vertical:before{content:"\f142";} .fa-ellipsis-vertical:before{content:"\f142";}
.icon-rss-sign:before{content:"\f143";} .fa-rss-sign:before{content:"\f143";}
.icon-play-sign:before{content:"\f144";} .fa-play-sign:before{content:"\f144";}
.icon-ticket:before{content:"\f145";} .fa-ticket:before{content:"\f145";}
.icon-minus-sign-alt:before{content:"\f146";} .fa-minus-sign-alt:before{content:"\f146";}
.icon-check-minus:before{content:"\f147";} .fa-check-minus:before{content:"\f147";}
.icon-level-up:before{content:"\f148";} .fa-level-up:before{content:"\f148";}
.icon-level-down:before{content:"\f149";} .fa-level-down:before{content:"\f149";}
.icon-check-sign:before{content:"\f14a";} .fa-check-sign:before{content:"\f14a";}
.icon-edit-sign:before{content:"\f14b";} .fa-edit-sign:before{content:"\f14b";}
.icon-external-link-sign:before{content:"\f14c";} .fa-external-link-sign:before{content:"\f14c";}
.icon-share-sign:before{content:"\f14d";} .fa-share-sign:before{content:"\f14d";}
.icon-compass:before{content:"\f14e";} .fa-compass:before{content:"\f14e";}
.icon-collapse-down:before{content:"\f150";} .fa-collapse-down:before{content:"\f150";}
.icon-collapse-up:before{content:"\f151";} .fa-collapse-up:before{content:"\f151";}
.icon-expand:before{content:"\f152";} .fa-expand:before{content:"\f152";}
.icon-euro:before,.icon-eur:before{content:"\f153";} .fa-euro:before,.fa-eur:before{content:"\f153";}
.icon-gbp:before{content:"\f154";} .fa-gbp:before{content:"\f154";}
.icon-dollar:before,.icon-usd:before{content:"\f155";} .fa-dollar:before,.fa-usd:before{content:"\f155";}
.icon-rupee:before,.icon-inr:before{content:"\f156";} .fa-rupee:before,.fa-inr:before{content:"\f156";}
.icon-cny:before,.icon-rmb:before,.icon-yen:before,.icon-jpy:before{content:"\f157";} .fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157";}
.icon-won:before,.icon-krw:before{content:"\f159";} .fa-won:before,.fa-krw:before{content:"\f159";}
.icon-bitcoin:before,.icon-btc:before{content:"\f15a";} .fa-bitcoin:before,.fa-btc:before{content:"\f15a";}
.icon-file:before{content:"\f15b";} .fa-file:before{content:"\f15b";}
.icon-file-text:before{content:"\f15c";} .fa-file-text:before{content:"\f15c";}
.icon-sort-by-alphabet:before{content:"\f15d";} .fa-sort-by-alphabet:before{content:"\f15d";}
.icon-sort-by-alphabet-alt:before{content:"\f15e";} .fa-sort-by-alphabet-alt:before{content:"\f15e";}
.icon-sort-by-attributes:before{content:"\f160";} .fa-sort-by-attributes:before{content:"\f160";}
.icon-sort-by-attributes-alt:before{content:"\f161";} .fa-sort-by-attributes-alt:before{content:"\f161";}
.icon-sort-by-order:before{content:"\f162";} .fa-sort-by-order:before{content:"\f162";}
.icon-sort-by-order-alt:before{content:"\f163";} .fa-sort-by-order-alt:before{content:"\f163";}
.icon-thumbs-up:before{content:"\f164";} .fa-thumbs-up:before{content:"\f164";}
.icon-thumbs-down:before{content:"\f165";} .fa-thumbs-down:before{content:"\f165";}
.icon-youtube-sign:before{content:"\f166";} .fa-youtube-sign:before{content:"\f166";}
.icon-youtube:before{content:"\f167";} .fa-youtube:before{content:"\f167";}
.icon-xing:before{content:"\f168";} .fa-xing:before{content:"\f168";}
.icon-xing-sign:before{content:"\f169";} .fa-xing-sign:before{content:"\f169";}
.icon-youtube-play:before{content:"\f16a";} .fa-youtube-play:before{content:"\f16a";}
.icon-dropbox:before{content:"\f16b";} .fa-dropbox:before{content:"\f16b";}
.icon-stackoverflow:before{content:"\f16c";} .fa-stackoverflow:before{content:"\f16c";}
.icon-instagram:before{content:"\f16d";} .fa-instagram:before{content:"\f16d";}
.icon-flickr:before{content:"\f16e";} .fa-flickr:before{content:"\f16e";}
.icon-adn:before{content:"\f170";} .fa-adn:before{content:"\f170";}
.icon-bitbucket:before{content:"\f171";} .fa-bitbucket:before{content:"\f171";}
.icon-bitbucket-sign:before{content:"\f172";} .fa-bitbucket-sign:before{content:"\f172";}
.icon-tumblr:before{content:"\f173";} .fa-tumblr:before{content:"\f173";}
.icon-tumblr-sign:before{content:"\f174";} .fa-tumblr-sign:before{content:"\f174";}
.icon-long-arrow-down:before{content:"\f175";} .fa-long-arrow-down:before{content:"\f175";}
.icon-long-arrow-up:before{content:"\f176";} .fa-long-arrow-up:before{content:"\f176";}
.icon-long-arrow-left:before{content:"\f177";} .fa-long-arrow-left:before{content:"\f177";}
.icon-long-arrow-right:before{content:"\f178";} .fa-long-arrow-right:before{content:"\f178";}
.icon-apple:before{content:"\f179";} .fa-apple:before{content:"\f179";}
.icon-windows:before{content:"\f17a";} .fa-windows:before{content:"\f17a";}
.icon-android:before{content:"\f17b";} .fa-android:before{content:"\f17b";}
.icon-linux:before{content:"\f17c";} .fa-linux:before{content:"\f17c";}
.icon-dribbble:before{content:"\f17d";} .fa-dribbble:before{content:"\f17d";}
.icon-skype:before{content:"\f17e";} .fa-skype:before{content:"\f17e";}
.icon-foursquare:before{content:"\f180";} .fa-foursquare:before{content:"\f180";}
.icon-trello:before{content:"\f181";} .fa-trello:before{content:"\f181";}
.icon-female:before{content:"\f182";} .fa-female:before{content:"\f182";}
.icon-male:before{content:"\f183";} .fa-male:before{content:"\f183";}
.icon-gittip:before{content:"\f184";} .fa-gittip:before{content:"\f184";}
.icon-sun:before{content:"\f185";} .fa-sun:before{content:"\f185";}
.icon-moon:before{content:"\f186";} .fa-moon:before{content:"\f186";}
.icon-archive:before{content:"\f187";} .fa-archive:before{content:"\f187";}
.icon-bug:before{content:"\f188";} .fa-bug:before{content:"\f188";}
.icon-vk:before{content:"\f189";} .fa-vk:before{content:"\f189";}
.icon-weibo:before{content:"\f18a";} .fa-weibo:before{content:"\f18a";}
.icon-renren:before{content:"\f18b";} .fa-renren:before{content:"\f18b";}
.icon-pagelines:before{content:"\f18c";} .fa-pagelines:before{content:"\f18c";}

70
less/bootstrap.less vendored
View File

@ -2,8 +2,8 @@
* -------------------------- */ * -------------------------- */
/* Bootstrap 2.0 sprites.less reset */ /* Bootstrap 2.0 sprites.less reset */
[class^="icon-"], [class^="fa-"],
[class*=" icon-"] { [class*=" fa-"] {
display: inline; display: inline;
width: auto; width: auto;
height: auto; height: auto;
@ -17,68 +17,68 @@
/* more sprites.less reset */ /* more sprites.less reset */
.icon-white, .icon-white,
.nav-pills > .active > a > [class^="icon-"], .nav-pills > .active > a > [class^="fa-"],
.nav-pills > .active > a > [class*=" icon-"], .nav-pills > .active > a > [class*=" fa-"],
.nav-list > .active > a > [class^="icon-"], .nav-list > .active > a > [class^="fa-"],
.nav-list > .active > a > [class*=" icon-"], .nav-list > .active > a > [class*=" fa-"],
.navbar-inverse .nav > .active > a > [class^="icon-"], .navbar-inverse .nav > .active > a > [class^="fa-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"], .navbar-inverse .nav > .active > a > [class*=" fa-"],
.dropdown-menu > li > a:hover > [class^="icon-"], .dropdown-menu > li > a:hover > [class^="fa-"],
.dropdown-menu > li > a:hover > [class*=" icon-"], .dropdown-menu > li > a:hover > [class*=" fa-"],
.dropdown-menu > .active > a > [class^="icon-"], .dropdown-menu > .active > a > [class^="fa-"],
.dropdown-menu > .active > a > [class*=" icon-"], .dropdown-menu > .active > a > [class*=" fa-"],
.dropdown-submenu:hover > a > [class^="icon-"], .dropdown-submenu:hover > a > [class^="fa-"],
.dropdown-submenu:hover > a > [class*=" icon-"] { .dropdown-submenu:hover > a > [class*=" fa-"] {
background-image: none; background-image: none;
} }
/* keeps Bootstrap styles with and without icons the same */ /* keeps Bootstrap styles with and without icons the same */
.btn, .nav { .btn, .nav {
[class^="icon-"], [class^="fa-"],
[class*=" icon-"] { [class*=" fa-"] {
// display: inline; // display: inline;
&.icon-large { line-height: .9em; } &.fa-large { line-height: .9em; }
&.icon-spin { display: inline-block; } &.fa-spin { display: inline-block; }
} }
} }
.nav-tabs, .nav-pills { .nav-tabs, .nav-pills {
[class^="icon-"], [class^="fa-"],
[class*=" icon-"] { [class*=" fa-"] {
&, &.icon-large { line-height: .9em; } &, &.fa-large { line-height: .9em; }
} }
} }
.btn { .btn {
[class^="icon-"], [class^="fa-"],
[class*=" icon-"] { [class*=" fa-"] {
&.pull-left, &.pull-right { &.pull-left, &.pull-right {
&.icon-2x { margin-top: .18em; } &.fa-2x { margin-top: .18em; }
} }
&.icon-spin.icon-large { line-height: .8em; } &.fa-spin.fa-large { line-height: .8em; }
} }
} }
.btn.btn-small { .btn.btn-small {
[class^="icon-"], [class^="fa-"],
[class*=" icon-"] { [class*=" fa-"] {
&.pull-left, &.pull-right { &.pull-left, &.pull-right {
&.icon-2x { margin-top: .25em; } &.fa-2x { margin-top: .25em; }
} }
} }
} }
.btn.btn-large { .btn.btn-large {
[class^="icon-"], [class^="fa-"],
[class*=" icon-"] { [class*=" fa-"] {
margin-top: 0; // overrides bootstrap default margin-top: 0; // overrides bootstrap default
&.pull-left, &.pull-right { &.pull-left, &.pull-right {
&.icon-2x { margin-top: .05em; } &.fa-2x { margin-top: .05em; }
} }
&.pull-left.icon-2x { margin-right: .2em; } &.pull-left.fa-2x { margin-right: .2em; }
&.pull-right.icon-2x { margin-left: .2em; } &.pull-right.fa-2x { margin-left: .2em; }
} }
} }
/* Fixes alignment in nav lists */ /* Fixes alignment in nav lists */
.nav-list [class^="icon-"], .nav-list [class^="fa-"],
.nav-list [class*=" icon-"] { .nav-list [class*=" fa-"] {
line-height: inherit; line-height: inherit;
} }

View File

@ -1,54 +1,54 @@
/* FONT AWESOME CORE /* FONT AWESOME CORE
* -------------------------- */ * -------------------------- */
[class^="icon-"], [class^="fa-"],
[class*=" icon-"] { [class*=" fa-"] {
.icon-FontAwesome(); .icon-FontAwesome();
} }
[class^="icon-"]:before, [class^="fa-"]:before,
[class*=" icon-"]:before { [class*=" fa-"]:before {
display: inline-block; display: inline-block;
text-decoration: inherit; text-decoration: inherit;
speak: none; speak: none;
} }
/* makes the font 33% larger relative to the icon container */ /* makes the font 33% larger relative to the icon container */
.icon-large:before { .fa-large:before {
font-size: (4em / 3); font-size: (4em / 3);
vertical-align: -10%; vertical-align: -10%;
} }
/* makes sure icons active on rollover in links */ /* makes sure icons active on rollover in links */
a { a {
[class^="icon-"], [class^="fa-"],
[class*=" icon-"] { [class*=" fa-"] {
display: inline; display: inline;
} }
} }
/* increased font size for icon-large */ /* increased font size for icon-large */
[class^="icon-"], [class^="fa-"],
[class*=" icon-"] { [class*=" fa-"] {
&.icon-fixed-width { &.fa-fixed-width {
display: inline-block; display: inline-block;
width: (16em / 14); width: (16em / 14);
padding-right: (4em / 14); padding-right: (4em / 14);
text-align: right; text-align: right;
&.icon-large { &.fa-large {
width: (20em / 14); width: (20em / 14);
} }
} }
} }
.icons-ul { .fas-ul {
padding-left: 0; padding-left: 0;
margin-left: @icons-li-width; margin-left: @icons-li-width;
list-style-type: none; list-style-type: none;
> li { position: relative; } > li { position: relative; }
.icon-li { .fa-li {
position: absolute; position: absolute;
left: -@icons-li-width; left: -@icons-li-width;
width: @icons-li-width; width: @icons-li-width;
@ -58,21 +58,21 @@ a {
} }
// allows usage of the hide class directly on font awesome icons // allows usage of the hide class directly on font awesome icons
[class^="icon-"], [class^="fa-"],
[class*=" icon-"] { [class*=" fa-"] {
&.hide { &.hide {
display: none; display: none;
} }
} }
.icon-muted { color: @iconMuted; } .fa-muted { color: @iconMuted; }
.icon-light { color: @iconLight; } .fa-light { color: @iconLight; }
.icon-dark { color: @iconDark; } .fa-dark { color: @iconDark; }
// Icon Borders // Icon Borders
// ------------------------- // -------------------------
.icon-border { .fa-border {
padding: .2em .25em .15em; padding: .2em .25em .15em;
border: solid 1px @borderColor; border: solid 1px @borderColor;
.border-radius(3px); .border-radius(3px);
@ -81,31 +81,31 @@ a {
// Icon Sizes // Icon Sizes
// ------------------------- // -------------------------
.icon-2x { .fa-2x {
font-size: 2em; font-size: 2em;
&.icon-border { &.fa-border {
border-width: 2px; border-width: 2px;
.border-radius(4px); .border-radius(4px);
} }
} }
.icon-3x { .fa-3x {
font-size: 3em; font-size: 3em;
&.icon-border { &.fa-border {
border-width: 3px; border-width: 3px;
.border-radius(5px); .border-radius(5px);
} }
} }
.icon-4x { .fa-4x {
font-size: 4em; font-size: 4em;
&.icon-border { &.fa-border {
border-width: 4px; border-width: 4px;
.border-radius(6px); .border-radius(6px);
} }
} }
.icon-5x { .fa-5x {
font-size: 5em; font-size: 5em;
&.icon-border { &.fa-border {
border-width: 5px; border-width: 5px;
.border-radius(7px); .border-radius(7px);
} }
@ -119,8 +119,8 @@ a {
.pull-right { float: right; } .pull-right { float: right; }
.pull-left { float: left; } .pull-left { float: left; }
[class^="icon-"], [class^="fa-"],
[class*=" icon-"] { [class*=" fa-"] {
&.pull-left { &.pull-left {
margin-right: .3em; margin-right: .3em;
} }

View File

@ -1,380 +1,380 @@
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */ readers do not read off random characters that represent icons */
.icon-glass:before { content: @glass; } .fa-glass:before { content: @glass; }
.icon-music:before { content: @music; } .fa-music:before { content: @music; }
.icon-search:before { content: @search; } .fa-search:before { content: @search; }
.icon-envelope-alt:before { content: @envelope-alt; } .fa-envelope-alt:before { content: @envelope-alt; }
.icon-heart:before { content: @heart; } .fa-heart:before { content: @heart; }
.icon-star:before { content: @star; } .fa-star:before { content: @star; }
.icon-star-empty:before { content: @star-empty; } .fa-star-empty:before { content: @star-empty; }
.icon-user:before { content: @user; } .fa-user:before { content: @user; }
.icon-film:before { content: @film; } .fa-film:before { content: @film; }
.icon-th-large:before { content: @th-large; } .fa-th-large:before { content: @th-large; }
.icon-th:before { content: @th; } .fa-th:before { content: @th; }
.icon-th-list:before { content: @th-list; } .fa-th-list:before { content: @th-list; }
.icon-ok:before { content: @ok; } .fa-ok:before { content: @ok; }
.icon-remove:before { content: @remove; } .fa-remove:before { content: @remove; }
.icon-zoom-in:before { content: @zoom-in; } .fa-zoom-in:before { content: @zoom-in; }
.icon-zoom-out:before { content: @zoom-out; } .fa-zoom-out:before { content: @zoom-out; }
.icon-power-off:before, .fa-power-off:before,
.icon-off:before { content: @off; } .fa-off:before { content: @off; }
.icon-signal:before { content: @signal; } .fa-signal:before { content: @signal; }
.icon-gear:before, .fa-gear:before,
.icon-cog:before { content: @cog; } .fa-cog:before { content: @cog; }
.icon-trash:before { content: @trash; } .fa-trash:before { content: @trash; }
.icon-home:before { content: @home; } .fa-home:before { content: @home; }
.icon-file-alt:before { content: @file-alt; } .fa-file-alt:before { content: @file-alt; }
.icon-time:before { content: @time; } .fa-time:before { content: @time; }
.icon-road:before { content: @road; } .fa-road:before { content: @road; }
.icon-download-alt:before { content: @download-alt; } .fa-download-alt:before { content: @download-alt; }
.icon-download:before { content: @download; } .fa-download:before { content: @download; }
.icon-upload:before { content: @upload; } .fa-upload:before { content: @upload; }
.icon-inbox:before { content: @inbox; } .fa-inbox:before { content: @inbox; }
.icon-play-circle:before { content: @play-circle; } .fa-play-circle:before { content: @play-circle; }
.icon-rotate-right:before, .fa-rotate-right:before,
.icon-repeat:before { content: @repeat; } .fa-repeat:before { content: @repeat; }
.icon-refresh:before { content: @refresh; } .fa-refresh:before { content: @refresh; }
.icon-list-alt:before { content: @list-alt; } .fa-list-alt:before { content: @list-alt; }
.icon-lock:before { content: @lock; } .fa-lock:before { content: @lock; }
.icon-flag:before { content: @flag; } .fa-flag:before { content: @flag; }
.icon-headphones:before { content: @headphones; } .fa-headphones:before { content: @headphones; }
.icon-volume-off:before { content: @volume-off; } .fa-volume-off:before { content: @volume-off; }
.icon-volume-down:before { content: @volume-down; } .fa-volume-down:before { content: @volume-down; }
.icon-volume-up:before { content: @volume-up; } .fa-volume-up:before { content: @volume-up; }
.icon-qrcode:before { content: @qrcode; } .fa-qrcode:before { content: @qrcode; }
.icon-barcode:before { content: @barcode; } .fa-barcode:before { content: @barcode; }
.icon-tag:before { content: @tag; } .fa-tag:before { content: @tag; }
.icon-tags:before { content: @tags; } .fa-tags:before { content: @tags; }
.icon-book:before { content: @book; } .fa-book:before { content: @book; }
.icon-bookmark:before { content: @bookmark; } .fa-bookmark:before { content: @bookmark; }
.icon-print:before { content: @print; } .fa-print:before { content: @print; }
.icon-camera:before { content: @camera; } .fa-camera:before { content: @camera; }
.icon-font:before { content: @font; } .fa-font:before { content: @font; }
.icon-bold:before { content: @bold; } .fa-bold:before { content: @bold; }
.icon-italic:before { content: @italic; } .fa-italic:before { content: @italic; }
.icon-text-height:before { content: @text-height; } .fa-text-height:before { content: @text-height; }
.icon-text-width:before { content: @text-width; } .fa-text-width:before { content: @text-width; }
.icon-align-left:before { content: @align-left; } .fa-align-left:before { content: @align-left; }
.icon-align-center:before { content: @align-center; } .fa-align-center:before { content: @align-center; }
.icon-align-right:before { content: @align-right; } .fa-align-right:before { content: @align-right; }
.icon-align-justify:before { content: @align-justify; } .fa-align-justify:before { content: @align-justify; }
.icon-list:before { content: @list; } .fa-list:before { content: @list; }
.icon-indent-left:before { content: @indent-left; } .fa-indent-left:before { content: @indent-left; }
.icon-indent-right:before { content: @indent-right; } .fa-indent-right:before { content: @indent-right; }
.icon-facetime-video:before { content: @facetime-video; } .fa-facetime-video:before { content: @facetime-video; }
.icon-picture:before { content: @picture; } .fa-picture:before { content: @picture; }
.icon-pencil:before { content: @pencil; } .fa-pencil:before { content: @pencil; }
.icon-map-marker:before { content: @map-marker; } .fa-map-marker:before { content: @map-marker; }
.icon-adjust:before { content: @adjust; } .fa-adjust:before { content: @adjust; }
.icon-tint:before { content: @tint; } .fa-tint:before { content: @tint; }
.icon-edit:before { content: @edit; } .fa-edit:before { content: @edit; }
.icon-share:before { content: @share; } .fa-share:before { content: @share; }
.icon-check:before { content: @check; } .fa-check:before { content: @check; }
.icon-move:before { content: @move; } .fa-move:before { content: @move; }
.icon-step-backward:before { content: @step-backward; } .fa-step-backward:before { content: @step-backward; }
.icon-fast-backward:before { content: @fast-backward; } .fa-fast-backward:before { content: @fast-backward; }
.icon-backward:before { content: @backward; } .fa-backward:before { content: @backward; }
.icon-play:before { content: @play; } .fa-play:before { content: @play; }
.icon-pause:before { content: @pause; } .fa-pause:before { content: @pause; }
.icon-stop:before { content: @stop; } .fa-stop:before { content: @stop; }
.icon-forward:before { content: @forward; } .fa-forward:before { content: @forward; }
.icon-fast-forward:before { content: @fast-forward; } .fa-fast-forward:before { content: @fast-forward; }
.icon-step-forward:before { content: @step-forward; } .fa-step-forward:before { content: @step-forward; }
.icon-eject:before { content: @eject; } .fa-eject:before { content: @eject; }
.icon-chevron-left:before { content: @chevron-left; } .fa-chevron-left:before { content: @chevron-left; }
.icon-chevron-right:before { content: @chevron-right; } .fa-chevron-right:before { content: @chevron-right; }
.icon-plus-sign:before { content: @plus-sign; } .fa-plus-sign:before { content: @plus-sign; }
.icon-minus-sign:before { content: @minus-sign; } .fa-minus-sign:before { content: @minus-sign; }
.icon-remove-sign:before { content: @remove-sign; } .fa-remove-sign:before { content: @remove-sign; }
.icon-ok-sign:before { content: @ok-sign; } .fa-ok-sign:before { content: @ok-sign; }
.icon-question-sign:before { content: @question-sign; } .fa-question-sign:before { content: @question-sign; }
.icon-info-sign:before { content: @info-sign; } .fa-info-sign:before { content: @info-sign; }
.icon-screenshot:before { content: @screenshot; } .fa-screenshot:before { content: @screenshot; }
.icon-remove-circle:before { content: @remove-circle; } .fa-remove-circle:before { content: @remove-circle; }
.icon-ok-circle:before { content: @ok-circle; } .fa-ok-circle:before { content: @ok-circle; }
.icon-ban-circle:before { content: @ban-circle; } .fa-ban-circle:before { content: @ban-circle; }
.icon-arrow-left:before { content: @arrow-left; } .fa-arrow-left:before { content: @arrow-left; }
.icon-arrow-right:before { content: @arrow-right; } .fa-arrow-right:before { content: @arrow-right; }
.icon-arrow-up:before { content: @arrow-up; } .fa-arrow-up:before { content: @arrow-up; }
.icon-arrow-down:before { content: @arrow-down; } .fa-arrow-down:before { content: @arrow-down; }
.icon-mail-forward:before, .fa-mail-forward:before,
.icon-share-alt:before { content: @share-alt; } .fa-share-alt:before { content: @share-alt; }
.icon-resize-full:before { content: @resize-full; } .fa-resize-full:before { content: @resize-full; }
.icon-resize-small:before { content: @resize-small; } .fa-resize-small:before { content: @resize-small; }
.icon-plus:before { content: @plus; } .fa-plus:before { content: @plus; }
.icon-minus:before { content: @minus; } .fa-minus:before { content: @minus; }
.icon-asterisk:before { content: @asterisk; } .fa-asterisk:before { content: @asterisk; }
.icon-exclamation-sign:before { content: @exclamation-sign; } .fa-exclamation-sign:before { content: @exclamation-sign; }
.icon-gift:before { content: @gift; } .fa-gift:before { content: @gift; }
.icon-leaf:before { content: @leaf; } .fa-leaf:before { content: @leaf; }
.icon-fire:before { content: @fire; } .fa-fire:before { content: @fire; }
.icon-eye-open:before { content: @eye-open; } .fa-eye-open:before { content: @eye-open; }
.icon-eye-close:before { content: @eye-close; } .fa-eye-close:before { content: @eye-close; }
.icon-warning-sign:before { content: @warning-sign; } .fa-warning-sign:before { content: @warning-sign; }
.icon-plane:before { content: @plane; } .fa-plane:before { content: @plane; }
.icon-calendar:before { content: @calendar; } .fa-calendar:before { content: @calendar; }
.icon-random:before { content: @random; } .fa-random:before { content: @random; }
.icon-comment:before { content: @comment; } .fa-comment:before { content: @comment; }
.icon-magnet:before { content: @magnet; } .fa-magnet:before { content: @magnet; }
.icon-chevron-up:before { content: @chevron-up; } .fa-chevron-up:before { content: @chevron-up; }
.icon-chevron-down:before { content: @chevron-down; } .fa-chevron-down:before { content: @chevron-down; }
.icon-retweet:before { content: @retweet; } .fa-retweet:before { content: @retweet; }
.icon-shopping-cart:before { content: @shopping-cart; } .fa-shopping-cart:before { content: @shopping-cart; }
.icon-folder-close:before { content: @folder-close; } .fa-folder-close:before { content: @folder-close; }
.icon-folder-open:before { content: @folder-open; } .fa-folder-open:before { content: @folder-open; }
.icon-resize-vertical:before { content: @resize-vertical; } .fa-resize-vertical:before { content: @resize-vertical; }
.icon-resize-horizontal:before { content: @resize-horizontal; } .fa-resize-horizontal:before { content: @resize-horizontal; }
.icon-bar-chart:before { content: @bar-chart; } .fa-bar-chart:before { content: @bar-chart; }
.icon-twitter-sign:before { content: @twitter-sign; } .fa-twitter-sign:before { content: @twitter-sign; }
.icon-facebook-sign:before { content: @facebook-sign; } .fa-facebook-sign:before { content: @facebook-sign; }
.icon-camera-retro:before { content: @camera-retro; } .fa-camera-retro:before { content: @camera-retro; }
.icon-key:before { content: @key; } .fa-key:before { content: @key; }
.icon-gears:before, .fa-gears:before,
.icon-cogs:before { content: @cogs; } .fa-cogs:before { content: @cogs; }
.icon-comments:before { content: @comments; } .fa-comments:before { content: @comments; }
.icon-thumbs-up-alt:before { content: @thumbs-up-alt; } .fa-thumbs-up-alt:before { content: @thumbs-up-alt; }
.icon-thumbs-down-alt:before { content: @thumbs-down-alt; } .fa-thumbs-down-alt:before { content: @thumbs-down-alt; }
.icon-star-half:before { content: @star-half; } .fa-star-half:before { content: @star-half; }
.icon-heart-empty:before { content: @heart-empty; } .fa-heart-empty:before { content: @heart-empty; }
.icon-log-out:before { content: @log-out; } .fa-log-out:before { content: @log-out; }
.icon-linkedin-sign:before { content: @linkedin-sign; } .fa-linkedin-sign:before { content: @linkedin-sign; }
.icon-pushpin:before { content: @pushpin; } .fa-pushpin:before { content: @pushpin; }
.icon-external-link:before { content: @external-link; } .fa-external-link:before { content: @external-link; }
.icon-log-in:before { content: @log-in; } .fa-log-in:before { content: @log-in; }
.icon-trophy:before { content: @trophy; } .fa-trophy:before { content: @trophy; }
.icon-github-sign:before { content: @github-sign; } .fa-github-sign:before { content: @github-sign; }
.icon-upload-alt:before { content: @upload-alt; } .fa-upload-alt:before { content: @upload-alt; }
.icon-lemon:before { content: @lemon; } .fa-lemon:before { content: @lemon; }
.icon-earphone:before { content: @earphone; } .fa-earphone:before { content: @earphone; }
.icon-unchecked:before { content: @unchecked; } .fa-unchecked:before { content: @unchecked; }
.icon-bookmark-empty:before { content: @bookmark-empty; } .fa-bookmark-empty:before { content: @bookmark-empty; }
.icon-phone-sign:before { content: @phone-sign; } .fa-phone-sign:before { content: @phone-sign; }
.icon-twitter:before { content: @twitter; } .fa-twitter:before { content: @twitter; }
.icon-facebook:before { content: @facebook; } .fa-facebook:before { content: @facebook; }
.icon-github:before { content: @github; } .fa-github:before { content: @github; }
.icon-unlock:before { content: @unlock; } .fa-unlock:before { content: @unlock; }
.icon-credit-card:before { content: @credit-card; } .fa-credit-card:before { content: @credit-card; }
.icon-rss:before { content: @rss; } .fa-rss:before { content: @rss; }
.icon-hdd:before { content: @hdd; } .fa-hdd:before { content: @hdd; }
.icon-bullhorn:before { content: @bullhorn; } .fa-bullhorn:before { content: @bullhorn; }
.icon-bell:before { content: @bell; } .fa-bell:before { content: @bell; }
.icon-certificate:before { content: @certificate; } .fa-certificate:before { content: @certificate; }
.icon-hand-right:before { content: @hand-right; } .fa-hand-right:before { content: @hand-right; }
.icon-hand-left:before { content: @hand-left; } .fa-hand-left:before { content: @hand-left; }
.icon-hand-up:before { content: @hand-up; } .fa-hand-up:before { content: @hand-up; }
.icon-hand-down:before { content: @hand-down; } .fa-hand-down:before { content: @hand-down; }
.icon-circle-arrow-left:before { content: @circle-arrow-left; } .fa-circle-arrow-left:before { content: @circle-arrow-left; }
.icon-circle-arrow-right:before { content: @circle-arrow-right; } .fa-circle-arrow-right:before { content: @circle-arrow-right; }
.icon-circle-arrow-up:before { content: @circle-arrow-up; } .fa-circle-arrow-up:before { content: @circle-arrow-up; }
.icon-circle-arrow-down:before { content: @circle-arrow-down; } .fa-circle-arrow-down:before { content: @circle-arrow-down; }
.icon-globe:before { content: @globe; } .fa-globe:before { content: @globe; }
.icon-wrench:before { content: @wrench; } .fa-wrench:before { content: @wrench; }
.icon-tasks:before { content: @tasks; } .fa-tasks:before { content: @tasks; }
.icon-filter:before { content: @filter; } .fa-filter:before { content: @filter; }
.icon-briefcase:before { content: @briefcase; } .fa-briefcase:before { content: @briefcase; }
.icon-fullscreen:before { content: @fullscreen; } .fa-fullscreen:before { content: @fullscreen; }
.icon-group:before { content: @group; } .fa-group:before { content: @group; }
.icon-link:before { content: @link; } .fa-link:before { content: @link; }
.icon-cloud:before { content: @cloud; } .fa-cloud:before { content: @cloud; }
.icon-beaker:before { content: @beaker; } .fa-beaker:before { content: @beaker; }
.icon-cut:before { content: @cut; } .fa-cut:before { content: @cut; }
.icon-copy:before { content: @copy; } .fa-copy:before { content: @copy; }
.icon-paperclip:before { content: @paperclip; } .fa-paperclip:before { content: @paperclip; }
.icon-floppy-disk:before { content: @floppy-disk; } .fa-floppy-disk:before { content: @floppy-disk; }
.icon-sign-blank:before { content: @sign-blank; } .fa-sign-blank:before { content: @sign-blank; }
.icon-reorder:before { content: @reorder; } .fa-reorder:before { content: @reorder; }
.icon-list-ul:before { content: @list-ul; } .fa-list-ul:before { content: @list-ul; }
.icon-list-ol:before { content: @list-ol; } .fa-list-ol:before { content: @list-ol; }
.icon-strikethrough:before { content: @strikethrough; } .fa-strikethrough:before { content: @strikethrough; }
.icon-underline:before { content: @underline; } .fa-underline:before { content: @underline; }
.icon-table:before { content: @table; } .fa-table:before { content: @table; }
.icon-magic:before { content: @magic; } .fa-magic:before { content: @magic; }
.icon-truck:before { content: @truck; } .fa-truck:before { content: @truck; }
.icon-pinterest:before { content: @pinterest; } .fa-pinterest:before { content: @pinterest; }
.icon-pinterest-sign:before { content: @pinterest-sign; } .fa-pinterest-sign:before { content: @pinterest-sign; }
.icon-google-plus-sign:before { content: @google-plus-sign; } .fa-google-plus-sign:before { content: @google-plus-sign; }
.icon-google-plus:before { content: @google-plus; } .fa-google-plus:before { content: @google-plus; }
.icon-money:before { content: @money; } .fa-money:before { content: @money; }
.icon-caret-down:before { content: @caret-down; } .fa-caret-down:before { content: @caret-down; }
.icon-caret-up:before { content: @caret-up; } .fa-caret-up:before { content: @caret-up; }
.icon-caret-left:before { content: @caret-left; } .fa-caret-left:before { content: @caret-left; }
.icon-caret-right:before { content: @caret-right; } .fa-caret-right:before { content: @caret-right; }
.icon-columns:before { content: @columns; } .fa-columns:before { content: @columns; }
.icon-sort:before { content: @sort; } .fa-sort:before { content: @sort; }
.icon-sort-down:before { content: @sort-down; } .fa-sort-down:before { content: @sort-down; }
.icon-sort-up:before { content: @sort-up; } .fa-sort-up:before { content: @sort-up; }
.icon-envelope:before { content: @envelope; } .fa-envelope:before { content: @envelope; }
.icon-linkedin:before { content: @linkedin; } .fa-linkedin:before { content: @linkedin; }
.icon-rotate-left:before, .fa-rotate-left:before,
.icon-undo:before { content: @undo; } .fa-undo:before { content: @undo; }
.icon-legal:before { content: @legal; } .fa-legal:before { content: @legal; }
.icon-dashboard:before { content: @dashboard; } .fa-dashboard:before { content: @dashboard; }
.icon-comment-alt:before { content: @comment-alt; } .fa-comment-alt:before { content: @comment-alt; }
.icon-comments-alt:before { content: @comments-alt; } .fa-comments-alt:before { content: @comments-alt; }
.icon-flash:before { content: @flash; } .fa-flash:before { content: @flash; }
.icon-sitemap:before { content: @sitemap; } .fa-sitemap:before { content: @sitemap; }
.icon-umbrella:before { content: @umbrella; } .fa-umbrella:before { content: @umbrella; }
.icon-paste:before { content: @paste; } .fa-paste:before { content: @paste; }
.icon-lightbulb:before { content: @lightbulb; } .fa-lightbulb:before { content: @lightbulb; }
.icon-exchange:before { content: @exchange; } .fa-exchange:before { content: @exchange; }
.icon-cloud-download:before { content: @cloud-download; } .fa-cloud-download:before { content: @cloud-download; }
.icon-cloud-upload:before { content: @cloud-upload; } .fa-cloud-upload:before { content: @cloud-upload; }
.icon-user-md:before { content: @user-md; } .fa-user-md:before { content: @user-md; }
.icon-stethoscope:before { content: @stethoscope; } .fa-stethoscope:before { content: @stethoscope; }
.icon-suitcase:before { content: @suitcase; } .fa-suitcase:before { content: @suitcase; }
.icon-bell-alt:before { content: @bell-alt; } .fa-bell-alt:before { content: @bell-alt; }
.icon-coffee:before { content: @coffee; } .fa-coffee:before { content: @coffee; }
.icon-cutlery:before { content: @cutlery; } .fa-cutlery:before { content: @cutlery; }
.icon-file-text-alt:before { content: @file-text-alt; } .fa-file-text-alt:before { content: @file-text-alt; }
.icon-building:before { content: @building; } .fa-building:before { content: @building; }
.icon-hospital:before { content: @hospital; } .fa-hospital:before { content: @hospital; }
.icon-ambulance:before { content: @ambulance; } .fa-ambulance:before { content: @ambulance; }
.icon-medkit:before { content: @medkit; } .fa-medkit:before { content: @medkit; }
.icon-fighter-jet:before { content: @fighter-jet; } .fa-fighter-jet:before { content: @fighter-jet; }
.icon-beer:before { content: @beer; } .fa-beer:before { content: @beer; }
.icon-h-sign:before { content: @h-sign; } .fa-h-sign:before { content: @h-sign; }
.icon-plus-sign-alt:before { content: @plus-sign-alt; } .fa-plus-sign-alt:before { content: @plus-sign-alt; }
.icon-double-angle-left:before { content: @double-angle-left; } .fa-double-angle-left:before { content: @double-angle-left; }
.icon-double-angle-right:before { content: @double-angle-right; } .fa-double-angle-right:before { content: @double-angle-right; }
.icon-double-angle-up:before { content: @double-angle-up; } .fa-double-angle-up:before { content: @double-angle-up; }
.icon-double-angle-down:before { content: @double-angle-down; } .fa-double-angle-down:before { content: @double-angle-down; }
.icon-angle-left:before { content: @angle-left; } .fa-angle-left:before { content: @angle-left; }
.icon-angle-right:before { content: @angle-right; } .fa-angle-right:before { content: @angle-right; }
.icon-angle-up:before { content: @angle-up; } .fa-angle-up:before { content: @angle-up; }
.icon-angle-down:before { content: @angle-down; } .fa-angle-down:before { content: @angle-down; }
.icon-desktop:before { content: @desktop; } .fa-desktop:before { content: @desktop; }
.icon-laptop:before { content: @laptop; } .fa-laptop:before { content: @laptop; }
.icon-tablet:before { content: @tablet; } .fa-tablet:before { content: @tablet; }
.icon-phone:before { content: @phone; } .fa-phone:before { content: @phone; }
.icon-circle-blank:before { content: @circle-blank; } .fa-circle-blank:before { content: @circle-blank; }
.icon-quote-left:before { content: @quote-left; } .fa-quote-left:before { content: @quote-left; }
.icon-quote-right:before { content: @quote-right; } .fa-quote-right:before { content: @quote-right; }
.icon-spinner:before { content: @spinner; } .fa-spinner:before { content: @spinner; }
.icon-circle:before { content: @circle; } .fa-circle:before { content: @circle; }
.icon-mail-reply:before, .fa-mail-reply:before,
.icon-reply:before { content: @reply; } .fa-reply:before { content: @reply; }
.icon-github-alt:before { content: @github-alt; } .fa-github-alt:before { content: @github-alt; }
.icon-folder-close-alt:before { content: @folder-close-alt; } .fa-folder-close-alt:before { content: @folder-close-alt; }
.icon-folder-open-alt:before { content: @folder-open-alt; } .fa-folder-open-alt:before { content: @folder-open-alt; }
.icon-expand-alt:before { content: @expand-alt; } .fa-expand-alt:before { content: @expand-alt; }
.icon-collapse-alt:before { content: @collapse-alt; } .fa-collapse-alt:before { content: @collapse-alt; }
.icon-smile:before { content: @smile; } .fa-smile:before { content: @smile; }
.icon-frown:before { content: @frown; } .fa-frown:before { content: @frown; }
.icon-meh:before { content: @meh; } .fa-meh:before { content: @meh; }
.icon-gamepad:before { content: @gamepad; } .fa-gamepad:before { content: @gamepad; }
.icon-keyboard:before { content: @keyboard; } .fa-keyboard:before { content: @keyboard; }
.icon-flag-alt:before { content: @flag-alt; } .fa-flag-alt:before { content: @flag-alt; }
.icon-flag-checkered:before { content: @flag-checkered; } .fa-flag-checkered:before { content: @flag-checkered; }
.icon-terminal:before { content: @terminal; } .fa-terminal:before { content: @terminal; }
.icon-code:before { content: @code; } .fa-code:before { content: @code; }
.icon-reply-all:before { content: @reply-all; } .fa-reply-all:before { content: @reply-all; }
.icon-mail-reply-all:before { content: @mail-reply-all; } .fa-mail-reply-all:before { content: @mail-reply-all; }
.icon-star-half-full:before, .fa-star-half-full:before,
.icon-star-half-empty:before { content: @star-half-empty; } .fa-star-half-empty:before { content: @star-half-empty; }
.icon-location-arrow:before { content: @location-arrow; } .fa-location-arrow:before { content: @location-arrow; }
.icon-crop:before { content: @crop; } .fa-crop:before { content: @crop; }
.icon-code-fork:before { content: @code-fork; } .fa-code-fork:before { content: @code-fork; }
.icon-unlink:before { content: @unlink; } .fa-unlink:before { content: @unlink; }
.icon-question:before { content: @question; } .fa-question:before { content: @question; }
.icon-info:before { content: @info; } .fa-info:before { content: @info; }
.icon-exclamation:before { content: @exclamation; } .fa-exclamation:before { content: @exclamation; }
.icon-superscript:before { content: @superscript; } .fa-superscript:before { content: @superscript; }
.icon-subscript:before { content: @subscript; } .fa-subscript:before { content: @subscript; }
.icon-eraser:before { content: @eraser; } .fa-eraser:before { content: @eraser; }
.icon-puzzle-piece:before { content: @puzzle-piece; } .fa-puzzle-piece:before { content: @puzzle-piece; }
.icon-microphone:before { content: @microphone; } .fa-microphone:before { content: @microphone; }
.icon-microphone-off:before { content: @microphone-off; } .fa-microphone-off:before { content: @microphone-off; }
.icon-shield:before { content: @shield; } .fa-shield:before { content: @shield; }
.icon-calendar-empty:before { content: @calendar-empty; } .fa-calendar-empty:before { content: @calendar-empty; }
.icon-fire-extinguisher:before { content: @fire-extinguisher; } .fa-fire-extinguisher:before { content: @fire-extinguisher; }
.icon-rocket:before { content: @rocket; } .fa-rocket:before { content: @rocket; }
.icon-maxcdn:before { content: @maxcdn; } .fa-maxcdn:before { content: @maxcdn; }
.icon-chevron-sign-left:before { content: @chevron-sign-left; } .fa-chevron-sign-left:before { content: @chevron-sign-left; }
.icon-chevron-sign-right:before { content: @chevron-sign-right; } .fa-chevron-sign-right:before { content: @chevron-sign-right; }
.icon-chevron-sign-up:before { content: @chevron-sign-up; } .fa-chevron-sign-up:before { content: @chevron-sign-up; }
.icon-chevron-sign-down:before { content: @chevron-sign-down; } .fa-chevron-sign-down:before { content: @chevron-sign-down; }
.icon-html5:before { content: @html5; } .fa-html5:before { content: @html5; }
.icon-css3:before { content: @css3; } .fa-css3:before { content: @css3; }
.icon-anchor:before { content: @anchor; } .fa-anchor:before { content: @anchor; }
.icon-unlock-alt:before { content: @unlock-alt; } .fa-unlock-alt:before { content: @unlock-alt; }
.icon-bullseye:before { content: @bullseye; } .fa-bullseye:before { content: @bullseye; }
.icon-ellipsis-horizontal:before { content: @ellipsis-horizontal; } .fa-ellipsis-horizontal:before { content: @ellipsis-horizontal; }
.icon-ellipsis-vertical:before { content: @ellipsis-vertical; } .fa-ellipsis-vertical:before { content: @ellipsis-vertical; }
.icon-rss-sign:before { content: @rss-sign; } .fa-rss-sign:before { content: @rss-sign; }
.icon-play-sign:before { content: @play-sign; } .fa-play-sign:before { content: @play-sign; }
.icon-ticket:before { content: @ticket; } .fa-ticket:before { content: @ticket; }
.icon-minus-sign-alt:before { content: @minus-sign-alt; } .fa-minus-sign-alt:before { content: @minus-sign-alt; }
.icon-check-minus:before { content: @check-minus; } .fa-check-minus:before { content: @check-minus; }
.icon-level-up:before { content: @level-up; } .fa-level-up:before { content: @level-up; }
.icon-level-down:before { content: @level-down; } .fa-level-down:before { content: @level-down; }
.icon-check-sign:before { content: @check-sign; } .fa-check-sign:before { content: @check-sign; }
.icon-edit-sign:before { content: @edit-sign; } .fa-edit-sign:before { content: @edit-sign; }
.icon-external-link-sign:before { content: @external-link-sign; } .fa-external-link-sign:before { content: @external-link-sign; }
.icon-share-sign:before { content: @share-sign; } .fa-share-sign:before { content: @share-sign; }
.icon-compass:before { content: @compass; } .fa-compass:before { content: @compass; }
.icon-collapse-down:before { content: @collapse-down; } .fa-collapse-down:before { content: @collapse-down; }
.icon-collapse-up:before { content: @collapse-up; } .fa-collapse-up:before { content: @collapse-up; }
.icon-expand:before { content: @expand; } .fa-expand:before { content: @expand; }
.icon-euro:before, .fa-euro:before,
.icon-eur:before { content: @eur; } .fa-eur:before { content: @eur; }
.icon-gbp:before { content: @gbp; } .fa-gbp:before { content: @gbp; }
.icon-dollar:before, .fa-dollar:before,
.icon-usd:before { content: @usd; } .fa-usd:before { content: @usd; }
.icon-rupee:before, .fa-rupee:before,
.icon-inr:before { content: @inr; } .fa-inr:before { content: @inr; }
.icon-cny:before, .fa-cny:before,
.icon-rmb:before, .fa-rmb:before,
.icon-yen:before, .fa-yen:before,
.icon-jpy:before { content: @jpy; } .fa-jpy:before { content: @jpy; }
.icon-won:before, .fa-won:before,
.icon-krw:before { content: @krw; } .fa-krw:before { content: @krw; }
.icon-bitcoin:before, .fa-bitcoin:before,
.icon-btc:before { content: @btc; } .fa-btc:before { content: @btc; }
.icon-file:before { content: @file; } .fa-file:before { content: @file; }
.icon-file-text:before { content: @file-text; } .fa-file-text:before { content: @file-text; }
.icon-sort-by-alphabet:before { content: @sort-by-alphabet; } .fa-sort-by-alphabet:before { content: @sort-by-alphabet; }
.icon-sort-by-alphabet-alt:before { content: @sort-by-alphabet-alt; } .fa-sort-by-alphabet-alt:before { content: @sort-by-alphabet-alt; }
.icon-sort-by-attributes:before { content: @sort-by-attributes; } .fa-sort-by-attributes:before { content: @sort-by-attributes; }
.icon-sort-by-attributes-alt:before { content: @sort-by-attributes-alt; } .fa-sort-by-attributes-alt:before { content: @sort-by-attributes-alt; }
.icon-sort-by-order:before { content: @sort-by-order; } .fa-sort-by-order:before { content: @sort-by-order; }
.icon-sort-by-order-alt:before { content: @sort-by-order-alt; } .fa-sort-by-order-alt:before { content: @sort-by-order-alt; }
.icon-thumbs-up:before { content: @thumbs-up; } .fa-thumbs-up:before { content: @thumbs-up; }
.icon-thumbs-down:before { content: @thumbs-down; } .fa-thumbs-down:before { content: @thumbs-down; }
.icon-youtube-sign:before { content: @youtube-sign; } .fa-youtube-sign:before { content: @youtube-sign; }
.icon-youtube:before { content: @youtube; } .fa-youtube:before { content: @youtube; }
.icon-xing:before { content: @xing; } .fa-xing:before { content: @xing; }
.icon-xing-sign:before { content: @xing-sign; } .fa-xing-sign:before { content: @xing-sign; }
.icon-youtube-play:before { content: @youtube-play; } .fa-youtube-play:before { content: @youtube-play; }
.icon-dropbox:before { content: @dropbox; } .fa-dropbox:before { content: @dropbox; }
.icon-stackoverflow:before { content: @stackoverflow; } .fa-stackoverflow:before { content: @stackoverflow; }
.icon-instagram:before { content: @instagram; } .fa-instagram:before { content: @instagram; }
.icon-flickr:before { content: @flickr; } .fa-flickr:before { content: @flickr; }
.icon-adn:before { content: @adn; } .fa-adn:before { content: @adn; }
.icon-bitbucket:before { content: @bitbucket; } .fa-bitbucket:before { content: @bitbucket; }
.icon-bitbucket-sign:before { content: @bitbucket-sign; } .fa-bitbucket-sign:before { content: @bitbucket-sign; }
.icon-tumblr:before { content: @tumblr; } .fa-tumblr:before { content: @tumblr; }
.icon-tumblr-sign:before { content: @tumblr-sign; } .fa-tumblr-sign:before { content: @tumblr-sign; }
.icon-long-arrow-down:before { content: @long-arrow-down; } .fa-long-arrow-down:before { content: @long-arrow-down; }
.icon-long-arrow-up:before { content: @long-arrow-up; } .fa-long-arrow-up:before { content: @long-arrow-up; }
.icon-long-arrow-left:before { content: @long-arrow-left; } .fa-long-arrow-left:before { content: @long-arrow-left; }
.icon-long-arrow-right:before { content: @long-arrow-right; } .fa-long-arrow-right:before { content: @long-arrow-right; }
.icon-apple:before { content: @apple; } .fa-apple:before { content: @apple; }
.icon-windows:before { content: @windows; } .fa-windows:before { content: @windows; }
.icon-android:before { content: @android; } .fa-android:before { content: @android; }
.icon-linux:before { content: @linux; } .fa-linux:before { content: @linux; }
.icon-dribbble:before { content: @dribbble; } .fa-dribbble:before { content: @dribbble; }
.icon-skype:before { content: @skype; } .fa-skype:before { content: @skype; }
.icon-foursquare:before { content: @foursquare; } .fa-foursquare:before { content: @foursquare; }
.icon-trello:before { content: @trello; } .fa-trello:before { content: @trello; }
.icon-female:before { content: @female; } .fa-female:before { content: @female; }
.icon-male:before { content: @male; } .fa-male:before { content: @male; }
.icon-gittip:before { content: @gittip; } .fa-gittip:before { content: @gittip; }
.icon-sun:before { content: @sun; } .fa-sun:before { content: @sun; }
.icon-moon:before { content: @moon; } .fa-moon:before { content: @moon; }
.icon-archive:before { content: @archive; } .fa-archive:before { content: @archive; }
.icon-bug:before { content: @bug; } .fa-bug:before { content: @bug; }
.icon-vk:before { content: @vk; } .fa-vk:before { content: @vk; }
.icon-weibo:before { content: @weibo; } .fa-weibo:before { content: @weibo; }
.icon-renren:before { content: @renren; } .fa-renren:before { content: @renren; }
.icon-pagelines:before { content: @pagelines; } .fa-pagelines:before { content: @pagelines; }

View File

@ -1,9 +1,11 @@
---
---
/* BOOTSTRAP SPECIFIC CLASSES /* BOOTSTRAP SPECIFIC CLASSES
* -------------------------- */ * -------------------------- */
/* Bootstrap 2.0 sprites.less reset */ /* Bootstrap 2.0 sprites.less reset */
[class^="icon-"], [class^="fa-"],
[class*=" icon-"] { [class*=" fa-"] {
display: inline; display: inline;
width: auto; width: auto;
height: auto; height: auto;
@ -17,68 +19,68 @@
/* more sprites.less reset */ /* more sprites.less reset */
.icon-white, .icon-white,
.nav-pills > .active > a > [class^="icon-"], .nav-pills > .active > a > [class^="fa-"],
.nav-pills > .active > a > [class*=" icon-"], .nav-pills > .active > a > [class*=" fa-"],
.nav-list > .active > a > [class^="icon-"], .nav-list > .active > a > [class^="fa-"],
.nav-list > .active > a > [class*=" icon-"], .nav-list > .active > a > [class*=" fa-"],
.navbar-inverse .nav > .active > a > [class^="icon-"], .navbar-inverse .nav > .active > a > [class^="fa-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"], .navbar-inverse .nav > .active > a > [class*=" fa-"],
.dropdown-menu > li > a:hover > [class^="icon-"], .dropdown-menu > li > a:hover > [class^="fa-"],
.dropdown-menu > li > a:hover > [class*=" icon-"], .dropdown-menu > li > a:hover > [class*=" fa-"],
.dropdown-menu > .active > a > [class^="icon-"], .dropdown-menu > .active > a > [class^="fa-"],
.dropdown-menu > .active > a > [class*=" icon-"], .dropdown-menu > .active > a > [class*=" fa-"],
.dropdown-submenu:hover > a > [class^="icon-"], .dropdown-submenu:hover > a > [class^="fa-"],
.dropdown-submenu:hover > a > [class*=" icon-"] { .dropdown-submenu:hover > a > [class*=" fa-"] {
background-image: none; background-image: none;
} }
/* keeps Bootstrap styles with and without icons the same */ /* keeps Bootstrap styles with and without icons the same */
.btn, .nav { .btn, .nav {
[class^="icon-"], [class^="fa-"],
[class*=" icon-"] { [class*=" fa-"] {
// display: inline; // display: inline;
&.icon-large { line-height: .9em; } &.fa-large { line-height: .9em; }
&.icon-spin { display: inline-block; } &.fa-spin { display: inline-block; }
} }
} }
.nav-tabs, .nav-pills { .nav-tabs, .nav-pills {
[class^="icon-"], [class^="fa-"],
[class*=" icon-"] { [class*=" fa-"] {
&, &.icon-large { line-height: .9em; } &, &.fa-large { line-height: .9em; }
} }
} }
.btn { .btn {
[class^="icon-"], [class^="fa-"],
[class*=" icon-"] { [class*=" fa-"] {
&.pull-left, &.pull-right { &.pull-left, &.pull-right {
&.icon-2x { margin-top: .18em; } &.fa-2x { margin-top: .18em; }
} }
&.icon-spin.icon-large { line-height: .8em; } &.fa-spin.fa-large { line-height: .8em; }
} }
} }
.btn.btn-small { .btn.btn-small {
[class^="icon-"], [class^="fa-"],
[class*=" icon-"] { [class*=" fa-"] {
&.pull-left, &.pull-right { &.pull-left, &.pull-right {
&.icon-2x { margin-top: .25em; } &.fa-2x { margin-top: .25em; }
} }
} }
} }
.btn.btn-large { .btn.btn-large {
[class^="icon-"], [class^="fa-"],
[class*=" icon-"] { [class*=" fa-"] {
margin-top: 0; // overrides bootstrap default margin-top: 0; // overrides bootstrap default
&.pull-left, &.pull-right { &.pull-left, &.pull-right {
&.icon-2x { margin-top: .05em; } &.fa-2x { margin-top: .05em; }
} }
&.pull-left.icon-2x { margin-right: .2em; } &.pull-left.fa-2x { margin-right: .2em; }
&.pull-right.icon-2x { margin-left: .2em; } &.pull-right.fa-2x { margin-left: .2em; }
} }
} }
/* Fixes alignment in nav lists */ /* Fixes alignment in nav lists */
.nav-list [class^="icon-"], .nav-list [class^="fa-"],
.nav-list [class*=" icon-"] { .nav-list [class*=" fa-"] {
line-height: inherit; line-height: inherit;
} }

View File

@ -1,54 +1,56 @@
---
---
/* FONT AWESOME CORE /* FONT AWESOME CORE
* -------------------------- */ * -------------------------- */
[class^="icon-"], [class^="fa-"],
[class*=" icon-"] { [class*=" fa-"] {
.icon-FontAwesome(); .icon-FontAwesome();
} }
[class^="icon-"]:before, [class^="fa-"]:before,
[class*=" icon-"]:before { [class*=" fa-"]:before {
display: inline-block; display: inline-block;
text-decoration: inherit; text-decoration: inherit;
speak: none; speak: none;
} }
/* makes the font 33% larger relative to the icon container */ /* makes the font 33% larger relative to the icon container */
.icon-large:before { .fa-large:before {
font-size: (4em / 3); font-size: (4em / 3);
vertical-align: -10%; vertical-align: -10%;
} }
/* makes sure icons active on rollover in links */ /* makes sure icons active on rollover in links */
a { a {
[class^="icon-"], [class^="fa-"],
[class*=" icon-"] { [class*=" fa-"] {
display: inline; display: inline;
} }
} }
/* increased font size for icon-large */ /* increased font size for icon-large */
[class^="icon-"], [class^="fa-"],
[class*=" icon-"] { [class*=" fa-"] {
&.icon-fixed-width { &.fa-fixed-width {
display: inline-block; display: inline-block;
width: (16em / 14); width: (16em / 14);
padding-right: (4em / 14); padding-right: (4em / 14);
text-align: right; text-align: right;
&.icon-large { &.fa-large {
width: (20em / 14); width: (20em / 14);
} }
} }
} }
.icons-ul { .fas-ul {
padding-left: 0; padding-left: 0;
margin-left: @icons-li-width; margin-left: @icons-li-width;
list-style-type: none; list-style-type: none;
> li { position: relative; } > li { position: relative; }
.icon-li { .fa-li {
position: absolute; position: absolute;
left: -@icons-li-width; left: -@icons-li-width;
width: @icons-li-width; width: @icons-li-width;
@ -58,21 +60,21 @@ a {
} }
// allows usage of the hide class directly on font awesome icons // allows usage of the hide class directly on font awesome icons
[class^="icon-"], [class^="fa-"],
[class*=" icon-"] { [class*=" fa-"] {
&.hide { &.hide {
display: none; display: none;
} }
} }
.icon-muted { color: @iconMuted; } .fa-muted { color: @iconMuted; }
.icon-light { color: @iconLight; } .fa-light { color: @iconLight; }
.icon-dark { color: @iconDark; } .fa-dark { color: @iconDark; }
// Icon Borders // Icon Borders
// ------------------------- // -------------------------
.icon-border { .fa-border {
padding: .2em .25em .15em; padding: .2em .25em .15em;
border: solid 1px @borderColor; border: solid 1px @borderColor;
.border-radius(3px); .border-radius(3px);
@ -81,31 +83,31 @@ a {
// Icon Sizes // Icon Sizes
// ------------------------- // -------------------------
.icon-2x { .fa-2x {
font-size: 2em; font-size: 2em;
&.icon-border { &.fa-border {
border-width: 2px; border-width: 2px;
.border-radius(4px); .border-radius(4px);
} }
} }
.icon-3x { .fa-3x {
font-size: 3em; font-size: 3em;
&.icon-border { &.fa-border {
border-width: 3px; border-width: 3px;
.border-radius(5px); .border-radius(5px);
} }
} }
.icon-4x { .fa-4x {
font-size: 4em; font-size: 4em;
&.icon-border { &.fa-border {
border-width: 4px; border-width: 4px;
.border-radius(6px); .border-radius(6px);
} }
} }
.icon-5x { .fa-5x {
font-size: 5em; font-size: 5em;
&.icon-border { &.fa-border {
border-width: 5px; border-width: 5px;
.border-radius(7px); .border-radius(7px);
} }
@ -119,8 +121,8 @@ a {
.pull-right { float: right; } .pull-right { float: right; }
.pull-left { float: left; } .pull-left { float: left; }
[class^="icon-"], [class^="fa-"],
[class*=" icon-"] { [class*=" fa-"] {
&.pull-left { &.pull-left {
margin-right: .3em; margin-right: .3em;
} }

View File

@ -3,5 +3,5 @@
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */ readers do not read off random characters that represent icons */
{% for icon in icons %}{% for alias in icon.aliases %} {% for icon in icons %}{% for alias in icon.aliases %}
.icon-{{ alias }}:before,{% endfor %} .{{ site.fontawesome.css_prefix }}-{{ alias }}:before,{% endfor %}
.icon-{{ icon.id }}:before { content: @{{ icon.id }}; }{% endfor %} .{{ site.fontawesome.css_prefix }}-{{ icon.id }}:before { content: @{{ icon.id }}; }{% endfor %}

795
src/glyphicons-test.html Normal file
View File

@ -0,0 +1,795 @@
---
title: Glyphicons Visual Test Cases
relative_path: ../
---
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en" xmlns="http://www.w3.org/1999/html"> <!--<![endif]-->
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8" />
<title>{% if page.title %}{{ page.title }}{% endif %}</title>
<meta name="description" content="Font Awesome, the iconic font designed for Bootstrap">
<meta name="author" content="Dave Gandy">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<meta name="viewport" content="initial-scale=1; maximum-scale=1">-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- CSS
================================================== -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="{{ page.relative_path }}assets/ico/favicon.ico">
<script type="text/javascript" src="//use.typekit.net/wnc7ioh.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-30136587-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body data-spy="scroll" data-target=".navbar">
<div class="wrapper"> <!-- necessary for sticky footer. wrap all content except footer -->
<section class="container">
<h1 class="page-header">Visual Test Cases</h1>
<h3>Icons <small>Icons should have proper alignment and not be clipped</small></h3>
<div class="row">
<div class="col-md-3">
<div class="well">
<i class="glyphicon glyphicon-calendar"></i> Calendar
</div>
</div>
<div class="col-md-3">
<div class="well">
<i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Calendar Large
</div>
</div>
<div class="col-md-3">
<i class="glyphicon glyphicon-calendar"></i> Calendar
</div>
<div class="col-md-3">
<i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Calendar Large
</div>
</div>
<div class="row" style="font-size: 24px; line-height: 1.5em;">
<div class="col-md-4">
<div class="well">
<i class="glyphicon glyphicon-calendar"></i> Calendar
</div>
</div>
<div class="col-md-4">
<div class="well">
<i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Calendar Large
</div>
</div>
<div class="col-md-4">
<i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Calendar Large
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="well">
<i class="glyphicon glyphicon-minus-sign"></i> Circle
</div>
</div>
<div class="col-md-3">
<div class="well">
<i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Circle Large
</div>
</div>
<div class="col-md-3">
<i class="glyphicon glyphicon-minus-sign"></i> Circle
</div>
<div class="col-md-3">
<i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Circle Large
</div>
</div>
<div class="row" style="font-size: 24px; line-height: 1.5em;">
<div class="col-md-4">
<div class="well">
<i class="glyphicon glyphicon-minus-sign"></i> Circle
</div>
</div>
<div class="col-md-4">
<div class="well">
<i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Circle Large
</div>
</div>
<div class="col-md-4">
<i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Circle Large
</div>
</div>
<h3>Links with Icons <small>icon should activate link & underline</small></h3>
<div class="row lead">
<div class="col-md-3">
<a href="#"><i class="glyphicon glyphicon-calendar"></i> Link Here</a>
</div>
<div class="col-md-3">
<a href="#"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Link Here</a>
</div>
<div class="col-md-3">
<a href="#">Link Here <i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
<div class="col-md-3">
<a href="#">Link Here <i class="glyphicon glyphicon-chevron-right glyphicon-lg"></i></a>
</div>
</div>
<div class="row">
<div class="col-md-3">
<a href="#"><i class="glyphicon glyphicon-calendar"></i> Link Here</a>
</div>
<div class="col-md-3">
<a href="#"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Link Here</a>
</div>
<div class="col-md-3">
<a href="#">Link Here <i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
<div class="col-md-3">
<a href="#">Link Here <i class="glyphicon glyphicon-chevron-right glyphicon-lg"></i></a>
</div>
</div>
<h3>Navbar <small>should stay same height </small></h3>
<nav class="navbar navbar-inverse" role="navigation">
<a class="navbar-brand" href="#"><i class="glyphicon glyphicon-flag"></i> Font Awesome</a>
<ul class="nav navbar-nav">
<li style="border: solid 1px white;"><a href="#">Nav Item 1</a></li>
<li class="dropdown" style="border: solid 1px white;">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Nav Item 2
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="glyphicon glyphicon-calendar"></i> Menu Item 1</a></li>
<li><a href="#"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Menu Item 2</a></li>
</ul>
</li>
<li style="border: solid 1px white;"><a href="#examples"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Nav Item 3</a></li>
<li style="border: solid 1px white;"><a href="#examples"><i class="glyphicon glyphicon-envelope"></i> Nav Item 4</a></li>
<li style="border: solid 1px white;"><a href="#examples"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Nav Item 5</a></li>
<li style="border: solid 1px white;"><a href="#examples"><i class="glyphicon glyphicon-minus-sign"></i> Nav Item 6</a></li>
</ul>
</nav>
<h3>Plain buttons next to buttons w/icons <small>should be same height, icons not clipped</small></h3>
<h4>Buttons</h4>
<div class="row">
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3; text-align: center;">
<div>
<button class="btn btn-default btn-xs">Button</button>
<button class="btn btn-default btn-xs"><i class="glyphicon glyphicon-calendar"></i> Button</button>
<button class="btn btn-default btn-xs"><i class="glyphicon glyphicon-calendar"></i></button>
</div>
<div>
<button class="btn btn-default btn-sm">Button</button>
<button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar"></i> Button</button>
<button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar"></i></button>
</div>
<div>
<button class="btn btn-default">Button</button>
<button class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i> Button</button>
<button class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i></button>
</div>
<div>
<button class="btn btn-default btn-lg">Button</button>
<button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-calendar"></i> Button</button>
<button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-calendar"></i></button>
</div>
</div>
</div>
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3; text-align: center;">
<div>
<button class="btn btn-default btn-xs">Button</button>
<button class="btn btn-default btn-xs"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Button</button>
<button class="btn btn-default btn-xs"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i></button>
</div>
<div>
<button class="btn btn-default btn-sm">Button</button>
<button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Button</button>
<button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i></button>
</div>
<div>
<button class="btn btn-default">Button</button>
<button class="btn btn-default"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Button</button>
<button class="btn btn-default"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i></button>
</div>
<div>
<button class="btn btn-default btn-lg">Button</button>
<button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Button</button>
<button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i></button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3; text-align: center;">
<div>
<button class="btn btn-default btn-xs">Button</button>
<button class="btn btn-default btn-xs"><i class="glyphicon glyphicon-minus-sign"></i> Button</button>
<button class="btn btn-default btn-xs"><i class="glyphicon glyphicon-minus-sign"></i></button>
</div>
<div>
<button class="btn btn-default btn-sm">Button</button>
<button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign"></i> Button</button>
<button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign"></i></button>
</div>
<div>
<button class="btn btn-default">Button</button>
<button class="btn btn-default"><i class="glyphicon glyphicon-minus-sign"></i> Button</button>
<button class="btn btn-default"><i class="glyphicon glyphicon-minus-sign"></i></button>
</div>
<div>
<button class="btn btn-default btn-lg">Button</button>
<button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign"></i> Button</button>
<button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign"></i></button>
</div>
</div>
</div>
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3; text-align: center;">
<div>
<button class="btn btn-default btn-xs">Button</button>
<button class="btn btn-default btn-xs"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Button</button>
<button class="btn btn-default btn-xs"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i></button>
</div>
<div>
<button class="btn btn-default btn-sm">Button</button>
<button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Button</button>
<button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i></button>
</div>
<div>
<button class="btn btn-default">Button</button>
<button class="btn btn-default"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Button</button>
<button class="btn btn-default"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i></button>
</div>
<div>
<button class="btn btn-default btn-lg">Button</button>
<button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Button</button>
<button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i></button>
</div>
</div>
</div>
</div>
<h4>Anchors</h4>
<div class="row">
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3; text-align: center;">
<div>
<a class="btn btn-default btn-xs">Button</a>
<a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-calendar"></i> Button</a>
<a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-calendar"></i></a>
</div>
<div>
<a class="btn btn-default btn-sm">Button</a>
<a class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar"></i> Button</a>
<a class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar"></i></a>
</div>
<div>
<a class="btn btn-default">Button</a>
<a class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i> Button</a>
<a class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i></a>
</div>
<div>
<a class="btn btn-default btn-lg">Button</a>
<a class="btn btn-default btn-lg"><i class="glyphicon glyphicon-calendar"></i> Button</a>
<a class="btn btn-default btn-lg"><i class="glyphicon glyphicon-calendar"></i></a>
</div>
</div>
</div>
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3; text-align: center;">
<div>
<a class="btn btn-default btn-xs">Button</a>
<a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Button</a>
<a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i></a>
</div>
<div>
<a class="btn btn-default btn-sm">Button</a>
<a class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Button</a>
<a class="btn btn-default btn-sm"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i></a>
</div>
<div>
<a class="btn btn-default">Button</a>
<a class="btn btn-default"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Button</a>
<a class="btn btn-default"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i></a>
</div>
<div>
<a class="btn btn-default btn-lg">Button</a>
<a class="btn btn-default btn-lg"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Button</a>
<a class="btn btn-default btn-lg"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i></a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3; text-align: center;">
<div>
<a class="btn btn-default btn-xs">Button</a>
<a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-minus-sign"></i> Button</a>
<a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-minus-sign"></i></a>
</div>
<div>
<a class="btn btn-default btn-sm">Button</a>
<a class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign"></i> Button</a>
<a class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign"></i></a>
</div>
<div>
<a class="btn btn-default">Button</a>
<a class="btn btn-default"><i class="glyphicon glyphicon-minus-sign"></i> Button</a>
<a class="btn btn-default"><i class="glyphicon glyphicon-minus-sign"></i></a>
</div>
<div>
<a class="btn btn-default btn-lg">Button</a>
<a class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign"></i> Button</a>
<a class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign"></i></a>
</div>
</div>
</div>
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3; text-align: center;">
<div>
<a class="btn btn-default btn-xs">Button</a>
<a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Button</a>
<a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i></a>
</div>
<div>
<a class="btn btn-default btn-sm">Button</a>
<a class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Button</a>
<a class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i></a>
</div>
<div>
<a class="btn btn-default">Button</a>
<a class="btn btn-default"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Button</a>
<a class="btn btn-default"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i></a>
</div>
<div>
<a class="btn btn-default btn-lg">Button</a>
<a class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Button</a>
<a class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i></a>
</div>
</div>
</div>
</div>
<h3>Button groups <small>should be same height</small></h3>
<div class="row">
<div class="col-md-4">
<div style="border: solid 1px #d3d3d3;">
<div class="btn-group">
<button class="btn btn-default btn-lg">
<i class="icon-adjust"></i>
</button>
<button class="btn btn-default btn-lg">
Text
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div style="border: solid 1px #d3d3d3;">
<div class="btn-group">
<button class="btn btn-default">
<i class="icon-adjust"></i>
</button>
<button class="btn btn-default">
Text
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div style="border: solid 1px #d3d3d3;">
<div class="btn-group">
<button class="btn btn-default btn-sm">
<i class="icon-adjust"></i>
</button>
<button class="btn btn-default btn-sm">
Text
</button>
</div>
</div>
</div>
</div>
<h3>Buttons with pulled 2x, 3x, 4x <small>should be same height, have correct line height</small></h3>
<div class="row">
<div class="col-md-4">
<div style="border: solid 1px #d3d3d3;">
<a class="btn btn-default btn-lg" href="#">
<i class="icon-github icon-2x pull-left"></i>
Longer<br>Button</a>
<a class="btn btn-default btn-lg" href="#">
Longer<br>Button</a>
</div>
</div>
<div class="col-md-4">
<div style="border: solid 1px #d3d3d3;">
<a class="btn btn-default" href="#">
<i class="icon-github icon-2x pull-left"></i>
Longer<br>Button</a>
<a class="btn btn-default" href="#">
Longer<br>Button</a>
</div>
</div>
<div class="col-md-4">
<div style="border: solid 1px #d3d3d3;">
<a class="btn btn-default btn-sm" href="#">
<i class="icon-github icon-2x pull-left"></i>
Longer<br>Button</a>
<a class="btn btn-default btn-sm" href="#">
Longer<br>Button</a>
</div>
</div>
</div>
<h3>Nav pills & nav tabs <small>should be same height and properly vertically aligned</small></h3>
<div class="row">
<div class="col-md-9">
<ul class="nav nav-pills" style="border: solid 1px #d3d3d3;">
<li class="active"><a href="#">Nav Item 1</a></li>
<li class="dropdown active">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Nav Item 2
<col-md- class="caret"></col-md->
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="glyphicon glyphicon-calendar"></i> Menu Item 1</a></li>
<li><a href="#"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Menu Item 2</a></li>
</ul>
</li>
<li class="dropdown active">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Nav Item 3
<i class="icon-caret-down"></i>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="glyphicon glyphicon-calendar"></i> Menu Item 1</a></li>
<li><a href="#"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Menu Item 2</a></li>
</ul>
</li>
<li class="active"><a href="#examples"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Nav Item 4</a></li>
<li class="active"><a href="#examples"><i class="icon-spinner icon-spin"></i> Nav Item 5</a></li>
<li class="active"><a href="#examples"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Nav Item 6</a></li>
<li class="active"><a href="#examples"><i class="glyphicon glyphicon-minus-sign"></i> Nav Item 7</a></li>
</ul>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Nav Item 1</a></li>
<li class="dropdown active">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Nav Item 2
<col-md- class="caret"></col-md->
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="glyphicon glyphicon-calendar"></i> Menu Item 1</a></li>
<li><a href="#"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Menu Item 2</a></li>
</ul>
</li>
<li class="dropdown active">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Nav Item 3
<i class="icon-caret-down"></i>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="glyphicon glyphicon-calendar"></i> Menu Item 1</a></li>
<li><a href="#"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Menu Item 2</a></li>
</ul>
</li>
<li class="active"><a href="#examples"><i class="glyphicon glyphicon-calendar glyphicon-lg"></i> Nav Item 4</a></li>
<li class="active"><a href="#examples"><i class="icon-spinner icon-spin"></i> Nav Item 5</a></li>
<li class="active"><a href="#examples"><i class="glyphicon glyphicon-minus-sign glyphicon-lg"></i> Nav Item 6</a></li>
<li class="active"><a href="#examples"><i class="glyphicon glyphicon-minus-sign"></i> Nav Item 7</a></li>
</ul>
</div>
<div class="col-md-3">
<ul class="nav nav-list">
<li>
<a href="#c1">
<i class="icon-chevron-right icon-fixed-width pull-right"></i> Overview
</a>
</li>
<li>
<a href="#c1">
Overview
<i class="icon-chevron-right icon-fixed-width pull-right"></i>
</a>
</li>
</ul>
</div>
</div>
<h3>2x, 3x, 4x icons in text <small>should have margins next to and below text</small></h3>
<div class="row">
<div class="col-md-6">
<p class="lead">
<i class="icon-stethoscope icon-3x pull-left icon-border"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
</p>
</div>
<div class="col-md-6">
<p class="lead">
<i class="icon-ambulance icon-4x pull-right icon-border"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<i class="glyphicon glyphicon-calendar icon-2x pull-left icon-border"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
</div>
<div class="col-md-4">
<i class="icon-stethoscope icon-3x pull-right icon-border"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
</div>
<div class="col-md-4">
<i class="icon-ambulance icon-4x pull-left"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
</div>
</div>
<h3>Bullets <small>should wrap appropriately, have proper spacing</small></h3>
<div class="row">
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3;">
<ul class="icons-ul">
<li><i class="icon-li glyphicon glyphicon-chevron-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="icon-li icon-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="icon-li glyphicon glyphicon-calendar"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="glyphicon glyphicon-calendar"></i>
<col-md- class="label">foo</col-md->
<a class="btn btn-default">foo</a>
</li>
</ul>
</div>
</div>
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3;">
<ul class="icons-ul">
<li><i class="icon-li glyphicon glyphicon-chevron-right glyphicon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="icon-li icon-arrow-right glyphicon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="icon-li glyphicon glyphicon-calendar glyphicon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3;">
<ul class="icons-ul lead">
<li><i class="icon-li glyphicon glyphicon-chevron-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="icon-li icon-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="icon-li glyphicon glyphicon-calendar"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div>
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3;">
<ul class="icons-ul lead">
<li><i class="icon-li glyphicon glyphicon-chevron-right glyphicon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="icon-li icon-arrow-right glyphicon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="icon-li glyphicon glyphicon-calendar glyphicon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3;">
<ul class="icons-ul">
<li><a href="#"><i class="icon-li glyphicon glyphicon-chevron-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><a href="#"><i class="icon-li icon-arrow-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><a href="#"><i class="icon-li glyphicon glyphicon-calendar"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div>
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3;">
<ul class="icons-ul">
<li><a href="#"><i class="icon-li glyphicon glyphicon-chevron-right glyphicon-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><a href="#"><i class="icon-li icon-arrow-right glyphicon-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><a href="#"><i class="icon-li glyphicon glyphicon-calendar glyphicon-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3;">
<ul class="icons-ul">
<li><i class="icon-li icon-refresh icon-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="icon-li icon-spinner icon-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="icon-li icon-spinner icon-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="glyphicon glyphicon-calendar"></i>
<col-md- class="label">foo</col-md->
<a class="btn btn-default">foo</a>
</li>
</ul>
</div>
</div>
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3;">
<ul class="icons-ul">
<li><i class="icon-li icon-refresh icon-spin glyphicon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="icon-li icon-spinner icon-spin glyphicon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="icon-li icon-spinner icon-spin glyphicon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="glyphicon glyphicon-calendar"></i>
<col-md- class="label">foo</col-md->
<a class="btn btn-default">foo</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3;">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div>
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3;">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div>
</div>
<h3>Spinning icons <small>icons should be aligned well and on center, buttons should be same height, won't work in ie7</small></h3>
<div style="border: solid 1px #d3d3d3;">
<i class="icon-refresh icon-spin"></i> Loading...
<button class="btn btn-default btn-sm"><i class="icon-refresh icon-spin"></i> Loading...</button>
<button class="btn btn-default btn-sm">Loading...</button>
<i class="glyphicon glyphicon-minus-sign-blank icon-spin"></i> Loading...
<button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign-blank icon-spin"></i> Loading...</button>
<a href="#"><i class="icon-refresh icon-spin"></i> Loading...</a>
</div>
<div style="border: solid 1px #d3d3d3;">
<i class="icon-refresh icon-spin"></i> Loading...
<button class="btn btn-default"><i class="icon-refresh icon-spin"></i> Loading...</button>
<button class="btn btn-default">Loading...</button>
<i class="glyphicon glyphicon-minus-sign-blank icon-spin"></i> Loading...
<button class="btn btn-default"><i class="glyphicon glyphicon-minus-sign-blank icon-spin"></i> Loading...</button>
</div>
<div style="border: solid 1px #d3d3d3;">
<i class="icon-spinner icon-spin"></i> Loading...
<button class="btn btn-default btn-lg"><i class="icon-spinner icon-spin"></i> Loading...</button>
<button class="btn btn-default btn-lg">Loading...</button>
<i class="glyphicon glyphicon-minus-sign-blank icon-spin"></i> Loading...
<button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign-blank icon-spin"></i> Loading...</button>
</div>
<h4>glyphicon-lg</h4>
<div style="border: solid 1px #d3d3d3;">
<i class="icon-refresh glyphicon-lg icon-spin"></i> Loading...
<button class="btn btn-default btn-sm"><i class="icon-refresh glyphicon-lg icon-spin"></i> Loading...</button>
<button class="btn btn-default btn-sm">Loading...</button>
<i class="glyphicon glyphicon-minus-sign-blank glyphicon-lg icon-spin"></i> Loading...
<button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-minus-sign-blank glyphicon-lg icon-spin"></i> Loading...</button>
</div>
<div style="border: solid 1px #d3d3d3;">
<i class="icon-refresh glyphicon-lg icon-spin"></i> Loading...
<button class="btn btn-default"><i class="icon-refresh glyphicon-lg icon-spin"></i> Loading...</button>
<button class="btn btn-default">Loading...</button>
<i class="glyphicon glyphicon-minus-sign-blank glyphicon-lg icon-spin"></i> Loading...
<button class="btn btn-default"><i class="glyphicon glyphicon-minus-sign-blank glyphicon-lg icon-spin"></i> Loading...</button>
</div>
<div style="border: solid 1px #d3d3d3;">
<i class="icon-spinner glyphicon-lg icon-spin"></i> Loading...
<button class="btn btn-default btn-lg"><i class="icon-spinner glyphicon-lg icon-spin"></i> Loading...</button>
<button class="btn btn-default btn-lg">Loading...</button>
<i class="glyphicon glyphicon-minus-sign-blank glyphicon-lg icon-spin"></i> Loading...
<button class="btn btn-default btn-lg"><i class="glyphicon glyphicon-minus-sign-blank glyphicon-lg icon-spin"></i> Loading...</button>
</div>
<h4>Bootstrap Prepend and Append</h4>
<div class="row">
<div class="col-md-6">
<div class="input-prepend">
<col-md- class="add-on"><i class="icon-spinner icon-spin"></i></col-md->
<input class="col-md-2" id="prependedInput" type="text" placeholder="Username">
</div>
</div>
<div class="col-md-6">
<div class="input-append">
<input class="col-md-2" id="appendedInput" type="text">
<col-md- class="add-on"><i class="icon-spinner icon-spin"></i></col-md->
</div>
</div>
</div>
<h3>Stacked icons</h3>
<div class="well">
{% include tests/stacked.html %}
</div>
<div class="well lead">
{% include tests/stacked.html %}
</div>
<h4>Stacked icons inside anchor</h4>
<div class="well">
{% include tests/stacked-inside-anchor.html %}
</div>
<h3>Mirrored and rotated icons</h3>
<div class="row">
<div class="col-md-6">
<div class="well">
{% include tests/rotated-flipped.html %}
</div>
</div>
<div class="col-md-6">
<div class="well lead">
{% include tests/rotated-flipped.html %}
</div>
</div>
</div>
<h4>Mirrored and rotated icons inside anchors and buttons</h4>
<div class="row">
<div class="col-md-6">
<div class="well">
{% include tests/rotated-flipped-inside-anchor.html %}
</div>
</div>
<div class="col-md-6">
<div class="well">
{% include tests/rotated-flipped-inside-btn.html %}
</div>
</div>
</div>
</section>
<div class="push"><!-- necessary for sticky footer --></div>
</div>
<script src="http://platform.twitter.com/widgets.js"></script>
<script src="{{ page.relative_path }}assets/js/jquery-1.7.1.min.js"></script>
<script src="{{ page.relative_path }}assets/js/ZeroClipboard-1.1.7.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>

View File

@ -11,67 +11,67 @@ relative_path: ../
<div class="row"> <div class="row">
<div class="span3"> <div class="span3">
<div class="well"> <div class="well">
<i class="icon-building"></i> Building <i class="fa fa-building"></i> Building
</div> </div>
</div> </div>
<div class="span3"> <div class="span3">
<div class="well"> <div class="well">
<i class="icon-building icon-large"></i> Building Large <i class="fa fa-building fa-large"></i> Building Large
</div> </div>
</div> </div>
<div class="span3"> <div class="span3">
<i class="icon-building"></i> Building <i class="fa fa-building"></i> Building
</div> </div>
<div class="span3"> <div class="span3">
<i class="icon-building icon-large"></i> Building Large <i class="fa fa-building fa-large"></i> Building Large
</div> </div>
</div> </div>
<div class="row" style="font-size: 24px; line-height: 1.5em;"> <div class="row" style="font-size: 24px; line-height: 1.5em;">
<div class="span4"> <div class="span4">
<div class="well"> <div class="well">
<i class="icon-building"></i> Building <i class="fa fa-building"></i> Building
</div> </div>
</div> </div>
<div class="span4"> <div class="span4">
<div class="well"> <div class="well">
<i class="icon-building icon-large"></i> Building Large <i class="fa fa-building fa-large"></i> Building Large
</div> </div>
</div> </div>
<div class="span4"> <div class="span4">
<i class="icon-building icon-large"></i> Building Large <i class="fa fa-building fa-large"></i> Building Large
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="span3"> <div class="span3">
<div class="well"> <div class="well">
<i class="icon-circle"></i> Circle <i class="fa fa-circle"></i> Circle
</div> </div>
</div> </div>
<div class="span3"> <div class="span3">
<div class="well"> <div class="well">
<i class="icon-circle icon-large"></i> Circle Large <i class="fa fa-circle fa-large"></i> Circle Large
</div> </div>
</div> </div>
<div class="span3"> <div class="span3">
<i class="icon-circle"></i> Circle <i class="fa fa-circle"></i> Circle
</div> </div>
<div class="span3"> <div class="span3">
<i class="icon-circle icon-large"></i> Circle Large <i class="fa fa-circle fa-large"></i> Circle Large
</div> </div>
</div> </div>
<div class="row" style="font-size: 24px; line-height: 1.5em;"> <div class="row" style="font-size: 24px; line-height: 1.5em;">
<div class="span4"> <div class="span4">
<div class="well"> <div class="well">
<i class="icon-circle"></i> Circle <i class="fa fa-circle"></i> Circle
</div> </div>
</div> </div>
<div class="span4"> <div class="span4">
<div class="well"> <div class="well">
<i class="icon-circle icon-large"></i> Circle Large <i class="fa fa-circle fa-large"></i> Circle Large
</div> </div>
</div> </div>
<div class="span4"> <div class="span4">
<i class="icon-circle icon-large"></i> Circle Large <i class="fa fa-circle fa-large"></i> Circle Large
</div> </div>
</div> </div>
@ -79,42 +79,42 @@ relative_path: ../
<h3>Links with Icons <small>icon should activate link & underline</small></h3> <h3>Links with Icons <small>icon should activate link & underline</small></h3>
<div class="row lead"> <div class="row lead">
<div class="span2"> <div class="span2">
<a href="#"><i class="icon-building"></i> Link Here</a> <a href="#"><i class="fa fa-building"></i> Link Here</a>
</div> </div>
<div class="span2"> <div class="span2">
<a href="#"><i class="icon-building icon-large"></i> Link Here</a> <a href="#"><i class="fa fa-building fa-large"></i> Link Here</a>
</div> </div>
<div class="span2"> <div class="span2">
<a href="#"><i class="icon-caret-down"></i> Link Here</a> <a href="#"><i class="fa fa-caret-down"></i> Link Here</a>
</div> </div>
<div class="span2"> <div class="span2">
<a href="#">Link Here <i class="icon-double-angle-right"></i></a> <a href="#">Link Here <i class="fa fa-double-angle-right"></i></a>
</div> </div>
<div class="span2"> <div class="span2">
<a href="#">Link Here <i class="icon-double-angle-right icon-large"></i></a> <a href="#">Link Here <i class="fa fa-double-angle-right fa-large"></i></a>
</div> </div>
<div class="span2"> <div class="span2">
<a href="#">Link Here <i class="icon-caret-down"></i></a> <a href="#">Link Here <i class="fa fa-caret-down"></i></a>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="span2"> <div class="span2">
<a href="#"><i class="icon-building"></i> Link Here</a> <a href="#"><i class="fa fa-building"></i> Link Here</a>
</div> </div>
<div class="span2"> <div class="span2">
<a href="#"><i class="icon-building icon-large"></i> Link Here</a> <a href="#"><i class="fa fa-building fa-large"></i> Link Here</a>
</div> </div>
<div class="span2"> <div class="span2">
<a href="#"><i class="icon-caret-down"></i> Link Here</a> <a href="#"><i class="fa fa-caret-down"></i> Link Here</a>
</div> </div>
<div class="span2"> <div class="span2">
<a href="#">Link Here <i class="icon-double-angle-right"></i></a> <a href="#">Link Here <i class="fa fa-double-angle-right"></i></a>
</div> </div>
<div class="span2"> <div class="span2">
<a href="#">Link Here <i class="icon-double-angle-right icon-large"></i></a> <a href="#">Link Here <i class="fa fa-double-angle-right fa-large"></i></a>
</div> </div>
<div class="span2"> <div class="span2">
<a href="#">Link Here <i class="icon-caret-down"></i></a> <a href="#">Link Here <i class="fa fa-caret-down"></i></a>
</div> </div>
</div> </div>
@ -123,23 +123,23 @@ relative_path: ../
<div class="navbar navbar-inverse navbar-static-top"> <div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container"> <div class="container">
<a class="brand" href="#"><i class="icon-flag"></i> Font Awesome</a> <a class="brand" href="#"><i class="fa fa-flag"></i> Font Awesome</a>
<ul class="nav"> <ul class="nav">
<li style="border: solid 1px white;"><a href="#">Nav Item 1</a></li> <li style="border: solid 1px white;"><a href="#">Nav Item 1</a></li>
<li class="dropdown" style="border: solid 1px white;"> <li class="dropdown" style="border: solid 1px white;">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Nav Item 2 Nav Item 2
<i class="icon-caret-down"></i> <i class="fa fa-caret-down"></i>
</a> </a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="icon-building"></i> Menu Item 1</a></li> <li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li>
<li><a href="#"><i class="icon-building icon-large"></i> Menu Item 2</a></li> <li><a href="#"><i class="fa fa-building fa-large"></i> Menu Item 2</a></li>
</ul> </ul>
</li> </li>
<li style="border: solid 1px white;"><a href="#examples"><i class="icon-building icon-large"></i> Nav Item 3</a></li> <li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-building fa-large"></i> Nav Item 3</a></li>
<li style="border: solid 1px white;"><a href="#examples"><i class="icon-envelope"></i> Nav Item 4</a></li> <li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-envelope"></i> Nav Item 4</a></li>
<li style="border: solid 1px white;"><a href="#examples"><i class="icon-circle icon-large"></i> Nav Item 5</a></li> <li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-circle fa-large"></i> Nav Item 5</a></li>
<li style="border: solid 1px white;"><a href="#examples"><i class="icon-circle"></i> Nav Item 6</a></li> <li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 6</a></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -153,23 +153,23 @@ relative_path: ../
<div style="border: solid 1px #d3d3d3; text-align: center;"> <div style="border: solid 1px #d3d3d3; text-align: center;">
<div> <div>
<button class="btn btn-mini">Button</button> <button class="btn btn-mini">Button</button>
<button class="btn btn-mini"><i class="icon-building"></i> Button</button> <button class="btn btn-mini"><i class="fa fa-building"></i> Button</button>
<button class="btn btn-mini"><i class="icon-building"></i></button> <button class="btn btn-mini"><i class="fa fa-building"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-small">Button</button> <button class="btn btn-small">Button</button>
<button class="btn btn-small"><i class="icon-building"></i> Button</button> <button class="btn btn-small"><i class="fa fa-building"></i> Button</button>
<button class="btn btn-small"><i class="icon-building"></i></button> <button class="btn btn-small"><i class="fa fa-building"></i></button>
</div> </div>
<div> <div>
<button class="btn">Button</button> <button class="btn">Button</button>
<button class="btn"><i class="icon-building"></i> Button</button> <button class="btn"><i class="fa fa-building"></i> Button</button>
<button class="btn"><i class="icon-building"></i></button> <button class="btn"><i class="fa fa-building"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-large">Button</button> <button class="btn btn-large">Button</button>
<button class="btn btn-large"><i class="icon-building"></i> Button</button> <button class="btn btn-large"><i class="fa fa-building"></i> Button</button>
<button class="btn btn-large"><i class="icon-building"></i></button> <button class="btn btn-large"><i class="fa fa-building"></i></button>
</div> </div>
</div> </div>
</div> </div>
@ -177,23 +177,23 @@ relative_path: ../
<div style="border: solid 1px #d3d3d3; text-align: center;"> <div style="border: solid 1px #d3d3d3; text-align: center;">
<div> <div>
<button class="btn btn-mini">Button</button> <button class="btn btn-mini">Button</button>
<button class="btn btn-mini"><i class="icon-building icon-large"></i> Button</button> <button class="btn btn-mini"><i class="fa fa-building fa-large"></i> Button</button>
<button class="btn btn-mini"><i class="icon-building icon-large"></i></button> <button class="btn btn-mini"><i class="fa fa-building fa-large"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-small">Button</button> <button class="btn btn-small">Button</button>
<button class="btn btn-small"><i class="icon-building icon-large"></i> Button</button> <button class="btn btn-small"><i class="fa fa-building fa-large"></i> Button</button>
<button class="btn btn-small"><i class="icon-building icon-large"></i></button> <button class="btn btn-small"><i class="fa fa-building fa-large"></i></button>
</div> </div>
<div> <div>
<button class="btn">Button</button> <button class="btn">Button</button>
<button class="btn"><i class="icon-building icon-large"></i> Button</button> <button class="btn"><i class="fa fa-building fa-large"></i> Button</button>
<button class="btn"><i class="icon-building icon-large"></i></button> <button class="btn"><i class="fa fa-building fa-large"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-large">Button</button> <button class="btn btn-large">Button</button>
<button class="btn btn-large"><i class="icon-building icon-large"></i> Button</button> <button class="btn btn-large"><i class="fa fa-building fa-large"></i> Button</button>
<button class="btn btn-large"><i class="icon-building icon-large"></i></button> <button class="btn btn-large"><i class="fa fa-building fa-large"></i></button>
</div> </div>
</div> </div>
</div> </div>
@ -203,23 +203,23 @@ relative_path: ../
<div style="border: solid 1px #d3d3d3; text-align: center;"> <div style="border: solid 1px #d3d3d3; text-align: center;">
<div> <div>
<button class="btn btn-mini">Button</button> <button class="btn btn-mini">Button</button>
<button class="btn btn-mini"><i class="icon-circle"></i> Button</button> <button class="btn btn-mini"><i class="fa fa-circle"></i> Button</button>
<button class="btn btn-mini"><i class="icon-circle"></i></button> <button class="btn btn-mini"><i class="fa fa-circle"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-small">Button</button> <button class="btn btn-small">Button</button>
<button class="btn btn-small"><i class="icon-circle"></i> Button</button> <button class="btn btn-small"><i class="fa fa-circle"></i> Button</button>
<button class="btn btn-small"><i class="icon-circle"></i></button> <button class="btn btn-small"><i class="fa fa-circle"></i></button>
</div> </div>
<div> <div>
<button class="btn">Button</button> <button class="btn">Button</button>
<button class="btn"><i class="icon-circle"></i> Button</button> <button class="btn"><i class="fa fa-circle"></i> Button</button>
<button class="btn"><i class="icon-circle"></i></button> <button class="btn"><i class="fa fa-circle"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-large">Button</button> <button class="btn btn-large">Button</button>
<button class="btn btn-large"><i class="icon-circle"></i> Button</button> <button class="btn btn-large"><i class="fa fa-circle"></i> Button</button>
<button class="btn btn-large"><i class="icon-circle"></i></button> <button class="btn btn-large"><i class="fa fa-circle"></i></button>
</div> </div>
</div> </div>
</div> </div>
@ -227,23 +227,23 @@ relative_path: ../
<div style="border: solid 1px #d3d3d3; text-align: center;"> <div style="border: solid 1px #d3d3d3; text-align: center;">
<div> <div>
<button class="btn btn-mini">Button</button> <button class="btn btn-mini">Button</button>
<button class="btn btn-mini"><i class="icon-circle icon-large"></i> Button</button> <button class="btn btn-mini"><i class="fa fa-circle fa-large"></i> Button</button>
<button class="btn btn-mini"><i class="icon-circle icon-large"></i></button> <button class="btn btn-mini"><i class="fa fa-circle fa-large"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-small">Button</button> <button class="btn btn-small">Button</button>
<button class="btn btn-small"><i class="icon-circle icon-large"></i> Button</button> <button class="btn btn-small"><i class="fa fa-circle fa-large"></i> Button</button>
<button class="btn btn-small"><i class="icon-circle icon-large"></i></button> <button class="btn btn-small"><i class="fa fa-circle fa-large"></i></button>
</div> </div>
<div> <div>
<button class="btn">Button</button> <button class="btn">Button</button>
<button class="btn"><i class="icon-circle icon-large"></i> Button</button> <button class="btn"><i class="fa fa-circle fa-large"></i> Button</button>
<button class="btn"><i class="icon-circle icon-large"></i></button> <button class="btn"><i class="fa fa-circle fa-large"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-large">Button</button> <button class="btn btn-large">Button</button>
<button class="btn btn-large"><i class="icon-circle icon-large"></i> Button</button> <button class="btn btn-large"><i class="fa fa-circle fa-large"></i> Button</button>
<button class="btn btn-large"><i class="icon-circle icon-large"></i></button> <button class="btn btn-large"><i class="fa fa-circle fa-large"></i></button>
</div> </div>
</div> </div>
</div> </div>
@ -256,23 +256,23 @@ relative_path: ../
<div style="border: solid 1px #d3d3d3; text-align: center;"> <div style="border: solid 1px #d3d3d3; text-align: center;">
<div> <div>
<a class="btn btn-mini">Button</a> <a class="btn btn-mini">Button</a>
<a class="btn btn-mini"><i class="icon-building"></i> Button</a> <a class="btn btn-mini"><i class="fa fa-building"></i> Button</a>
<a class="btn btn-mini"><i class="icon-building"></i></a> <a class="btn btn-mini"><i class="fa fa-building"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-small">Button</a> <a class="btn btn-small">Button</a>
<a class="btn btn-small"><i class="icon-building"></i> Button</a> <a class="btn btn-small"><i class="fa fa-building"></i> Button</a>
<a class="btn btn-small"><i class="icon-building"></i></a> <a class="btn btn-small"><i class="fa fa-building"></i></a>
</div> </div>
<div> <div>
<a class="btn">Button</a> <a class="btn">Button</a>
<a class="btn"><i class="icon-building"></i> Button</a> <a class="btn"><i class="fa fa-building"></i> Button</a>
<a class="btn"><i class="icon-building"></i></a> <a class="btn"><i class="fa fa-building"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-large">Button</a> <a class="btn btn-large">Button</a>
<a class="btn btn-large"><i class="icon-building"></i> Button</a> <a class="btn btn-large"><i class="fa fa-building"></i> Button</a>
<a class="btn btn-large"><i class="icon-building"></i></a> <a class="btn btn-large"><i class="fa fa-building"></i></a>
</div> </div>
</div> </div>
</div> </div>
@ -280,23 +280,23 @@ relative_path: ../
<div style="border: solid 1px #d3d3d3; text-align: center;"> <div style="border: solid 1px #d3d3d3; text-align: center;">
<div> <div>
<a class="btn btn-mini">Button</a> <a class="btn btn-mini">Button</a>
<a class="btn btn-mini"><i class="icon-building icon-large"></i> Button</a> <a class="btn btn-mini"><i class="fa fa-building fa-large"></i> Button</a>
<a class="btn btn-mini"><i class="icon-building icon-large"></i></a> <a class="btn btn-mini"><i class="fa fa-building fa-large"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-small">Button</a> <a class="btn btn-small">Button</a>
<a class="btn btn-small"><i class="icon-building icon-large"></i> Button</a> <a class="btn btn-small"><i class="fa fa-building fa-large"></i> Button</a>
<a class="btn btn-small"><i class="icon-building icon-large"></i></a> <a class="btn btn-small"><i class="fa fa-building fa-large"></i></a>
</div> </div>
<div> <div>
<a class="btn">Button</a> <a class="btn">Button</a>
<a class="btn"><i class="icon-building icon-large"></i> Button</a> <a class="btn"><i class="fa fa-building fa-large"></i> Button</a>
<a class="btn"><i class="icon-building icon-large"></i></a> <a class="btn"><i class="fa fa-building fa-large"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-large">Button</a> <a class="btn btn-large">Button</a>
<a class="btn btn-large"><i class="icon-building icon-large"></i> Button</a> <a class="btn btn-large"><i class="fa fa-building fa-large"></i> Button</a>
<a class="btn btn-large"><i class="icon-building icon-large"></i></a> <a class="btn btn-large"><i class="fa fa-building fa-large"></i></a>
</div> </div>
</div> </div>
</div> </div>
@ -306,23 +306,23 @@ relative_path: ../
<div style="border: solid 1px #d3d3d3; text-align: center;"> <div style="border: solid 1px #d3d3d3; text-align: center;">
<div> <div>
<a class="btn btn-mini">Button</a> <a class="btn btn-mini">Button</a>
<a class="btn btn-mini"><i class="icon-circle"></i> Button</a> <a class="btn btn-mini"><i class="fa fa-circle"></i> Button</a>
<a class="btn btn-mini"><i class="icon-circle"></i></a> <a class="btn btn-mini"><i class="fa fa-circle"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-small">Button</a> <a class="btn btn-small">Button</a>
<a class="btn btn-small"><i class="icon-circle"></i> Button</a> <a class="btn btn-small"><i class="fa fa-circle"></i> Button</a>
<a class="btn btn-small"><i class="icon-circle"></i></a> <a class="btn btn-small"><i class="fa fa-circle"></i></a>
</div> </div>
<div> <div>
<a class="btn">Button</a> <a class="btn">Button</a>
<a class="btn"><i class="icon-circle"></i> Button</a> <a class="btn"><i class="fa fa-circle"></i> Button</a>
<a class="btn"><i class="icon-circle"></i></a> <a class="btn"><i class="fa fa-circle"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-large">Button</a> <a class="btn btn-large">Button</a>
<a class="btn btn-large"><i class="icon-circle"></i> Button</a> <a class="btn btn-large"><i class="fa fa-circle"></i> Button</a>
<a class="btn btn-large"><i class="icon-circle"></i></a> <a class="btn btn-large"><i class="fa fa-circle"></i></a>
</div> </div>
</div> </div>
</div> </div>
@ -330,23 +330,23 @@ relative_path: ../
<div style="border: solid 1px #d3d3d3; text-align: center;"> <div style="border: solid 1px #d3d3d3; text-align: center;">
<div> <div>
<a class="btn btn-mini">Button</a> <a class="btn btn-mini">Button</a>
<a class="btn btn-mini"><i class="icon-circle icon-large"></i> Button</a> <a class="btn btn-mini"><i class="fa fa-circle fa-large"></i> Button</a>
<a class="btn btn-mini"><i class="icon-circle icon-large"></i></a> <a class="btn btn-mini"><i class="fa fa-circle fa-large"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-small">Button</a> <a class="btn btn-small">Button</a>
<a class="btn btn-small"><i class="icon-circle icon-large"></i> Button</a> <a class="btn btn-small"><i class="fa fa-circle fa-large"></i> Button</a>
<a class="btn btn-small"><i class="icon-circle icon-large"></i></a> <a class="btn btn-small"><i class="fa fa-circle fa-large"></i></a>
</div> </div>
<div> <div>
<a class="btn">Button</a> <a class="btn">Button</a>
<a class="btn"><i class="icon-circle icon-large"></i> Button</a> <a class="btn"><i class="fa fa-circle fa-large"></i> Button</a>
<a class="btn"><i class="icon-circle icon-large"></i></a> <a class="btn"><i class="fa fa-circle fa-large"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-large">Button</a> <a class="btn btn-large">Button</a>
<a class="btn btn-large"><i class="icon-circle icon-large"></i> Button</a> <a class="btn btn-large"><i class="fa fa-circle fa-large"></i> Button</a>
<a class="btn btn-large"><i class="icon-circle icon-large"></i></a> <a class="btn btn-large"><i class="fa fa-circle fa-large"></i></a>
</div> </div>
</div> </div>
</div> </div>
@ -358,7 +358,7 @@ relative_path: ../
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-large"> <button class="btn btn-large">
<i class="icon-adjust"></i> <i class="fa fa-adjust"></i>
</button> </button>
<button class="btn btn-large"> <button class="btn btn-large">
Text Text
@ -370,7 +370,7 @@ relative_path: ../
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<div class="btn-group"> <div class="btn-group">
<button class="btn"> <button class="btn">
<i class="icon-adjust"></i> <i class="fa fa-adjust"></i>
</button> </button>
<button class="btn"> <button class="btn">
Text Text
@ -382,7 +382,7 @@ relative_path: ../
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-small"> <button class="btn btn-small">
<i class="icon-adjust"></i> <i class="fa fa-adjust"></i>
</button> </button>
<button class="btn btn-small"> <button class="btn btn-small">
Text Text
@ -397,7 +397,7 @@ relative_path: ../
<div class="span4"> <div class="span4">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<a class="btn btn-large" href="#"> <a class="btn btn-large" href="#">
<i class="icon-github icon-2x pull-left"></i> <i class="fa fa-github fa fa-2x pull-left"></i>
Longer<br>Button</a> Longer<br>Button</a>
<a class="btn btn-large" href="#"> <a class="btn btn-large" href="#">
Longer<br>Button</a> Longer<br>Button</a>
@ -406,7 +406,7 @@ relative_path: ../
<div class="span4"> <div class="span4">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<a class="btn" href="#"> <a class="btn" href="#">
<i class="icon-github icon-2x pull-left"></i> <i class="fa fa-github fa fa-2x pull-left"></i>
Longer<br>Button</a> Longer<br>Button</a>
<a class="btn" href="#"> <a class="btn" href="#">
Longer<br>Button</a> Longer<br>Button</a>
@ -415,7 +415,7 @@ relative_path: ../
<div class="span4"> <div class="span4">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<a class="btn btn-small" href="#"> <a class="btn btn-small" href="#">
<i class="icon-github icon-2x pull-left"></i> <i class="fa fa-github fa fa-2x pull-left"></i>
Longer<br>Button</a> Longer<br>Button</a>
<a class="btn btn-small" href="#"> <a class="btn btn-small" href="#">
Longer<br>Button</a> Longer<br>Button</a>
@ -435,24 +435,24 @@ relative_path: ../
<span class="caret"></span> <span class="caret"></span>
</a> </a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="icon-building"></i> Menu Item 1</a></li> <li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li>
<li><a href="#"><i class="icon-building icon-large"></i> Menu Item 2</a></li> <li><a href="#"><i class="fa fa-building fa-large"></i> Menu Item 2</a></li>
</ul> </ul>
</li> </li>
<li class="dropdown active"> <li class="dropdown active">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Nav Item 3 Nav Item 3
<i class="icon-caret-down"></i> <i class="fa fa-caret-down"></i>
</a> </a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="icon-building"></i> Menu Item 1</a></li> <li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li>
<li><a href="#"><i class="icon-building icon-large"></i> Menu Item 2</a></li> <li><a href="#"><i class="fa fa-building fa-large"></i> Menu Item 2</a></li>
</ul> </ul>
</li> </li>
<li class="active"><a href="#examples"><i class="icon-building icon-large"></i> Nav Item 4</a></li> <li class="active"><a href="#examples"><i class="fa fa-building fa-large"></i> Nav Item 4</a></li>
<li class="active"><a href="#examples"><i class="icon-spinner icon-spin"></i> Nav Item 5</a></li> <li class="active"><a href="#examples"><i class="fa-spinner fa-spin"></i> Nav Item 5</a></li>
<li class="active"><a href="#examples"><i class="icon-circle icon-large"></i> Nav Item 6</a></li> <li class="active"><a href="#examples"><i class="fa fa-circle fa-large"></i> Nav Item 6</a></li>
<li class="active"><a href="#examples"><i class="icon-circle"></i> Nav Item 7</a></li> <li class="active"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 7</a></li>
</ul> </ul>
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="active"><a href="#">Nav Item 1</a></li> <li class="active"><a href="#">Nav Item 1</a></li>
@ -462,37 +462,37 @@ relative_path: ../
<span class="caret"></span> <span class="caret"></span>
</a> </a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="icon-building"></i> Menu Item 1</a></li> <li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li>
<li><a href="#"><i class="icon-building icon-large"></i> Menu Item 2</a></li> <li><a href="#"><i class="fa fa-building fa-large"></i> Menu Item 2</a></li>
</ul> </ul>
</li> </li>
<li class="dropdown active"> <li class="dropdown active">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Nav Item 3 Nav Item 3
<i class="icon-caret-down"></i> <i class="fa fa-caret-down"></i>
</a> </a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="icon-building"></i> Menu Item 1</a></li> <li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li>
<li><a href="#"><i class="icon-building icon-large"></i> Menu Item 2</a></li> <li><a href="#"><i class="fa fa-building fa-large"></i> Menu Item 2</a></li>
</ul> </ul>
</li> </li>
<li class="active"><a href="#examples"><i class="icon-building icon-large"></i> Nav Item 4</a></li> <li class="active"><a href="#examples"><i class="fa fa-building fa-large"></i> Nav Item 4</a></li>
<li class="active"><a href="#examples"><i class="icon-spinner icon-spin"></i> Nav Item 5</a></li> <li class="active"><a href="#examples"><i class="fa-spinner fa-spin"></i> Nav Item 5</a></li>
<li class="active"><a href="#examples"><i class="icon-circle icon-large"></i> Nav Item 6</a></li> <li class="active"><a href="#examples"><i class="fa fa-circle fa-large"></i> Nav Item 6</a></li>
<li class="active"><a href="#examples"><i class="icon-circle"></i> Nav Item 7</a></li> <li class="active"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 7</a></li>
</ul> </ul>
</div> </div>
<div class="span3"> <div class="span3">
<ul class="nav nav-list"> <ul class="nav nav-list">
<li> <li>
<a href="#c1"> <a href="#c1">
<i class="icon-chevron-right icon-fixed-width pull-right"></i> Overview <i class="fa fa-chevron-right fa fa-fixed-width pull-right"></i> Overview
</a> </a>
</li> </li>
<li> <li>
<a href="#c1"> <a href="#c1">
Overview Overview
<i class="icon-chevron-right icon-fixed-width pull-right"></i> <i class="fa fa-chevron-right fa fa-fixed-width pull-right"></i>
</a> </a>
</li> </li>
</ul> </ul>
@ -505,28 +505,28 @@ relative_path: ../
<div class="row"> <div class="row">
<div class="span6"> <div class="span6">
<p class="lead"> <p class="lead">
<i class="icon-stethoscope icon-3x pull-left icon-border"></i> <i class="fa fa-stethoscope fa fa-3x pull-left fa fa-border"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
</p> </p>
</div> </div>
<div class="span6"> <div class="span6">
<p class="lead"> <p class="lead">
<i class="icon-ambulance icon-4x pull-right icon-border"></i> <i class="fa fa-ambulance fa fa-4x pull-right fa fa-border"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
</p> </p>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<i class="icon-building icon-2x pull-left icon-border"></i> <i class="fa fa-building fa fa-2x pull-left fa fa-border"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
</div> </div>
<div class="span4"> <div class="span4">
<i class="icon-stethoscope icon-3x pull-right icon-border"></i> <i class="fa fa-stethoscope fa fa-3x pull-right fa fa-border"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
</div> </div>
<div class="span4"> <div class="span4">
<i class="icon-ambulance icon-4x pull-left"></i> <i class="fa fa-ambulance fa fa-4x pull-left"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
</div> </div>
</div> </div>
@ -536,11 +536,11 @@ relative_path: ../
<div class="row"> <div class="row">
<div class="span6"> <div class="span6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="icons-ul"> <ul class="fas-ul">
<li><i class="icon-li icon-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-li fa fa-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="icon-li icon-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> <li><i class="fa-li fa fa-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="icon-li icon-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <li><i class="fa-li fa fa-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="icon-building"></i> <i class="fa fa-building"></i>
<span class="label">foo</span> <span class="label">foo</span>
<a class="btn">foo</a> <a class="btn">foo</a>
</li> </li>
@ -549,10 +549,10 @@ relative_path: ../
</div> </div>
<div class="span6"> <div class="span6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="icons-ul"> <ul class="fas-ul">
<li><i class="icon-li icon-double-angle-right icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-li fa fa-double-angle-right fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="icon-li icon-arrow-right icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> <li><i class="fa-li fa fa-arrow-right fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="icon-li icon-building icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-li fa fa-building fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -560,19 +560,19 @@ relative_path: ../
<div class="row"> <div class="row">
<div class="span6"> <div class="span6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="icons-ul lead"> <ul class="fas-ul lead">
<li><i class="icon-li icon-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-li fa fa-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="icon-li icon-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> <li><i class="fa-li fa fa-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="icon-li icon-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-li fa fa-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="span6"> <div class="span6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="icons-ul lead"> <ul class="fas-ul lead">
<li><i class="icon-li icon-double-angle-right icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-li fa fa-double-angle-right fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="icon-li icon-arrow-right icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> <li><i class="fa-li fa fa-arrow-right fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="icon-li icon-building icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-li fa fa-building fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -580,19 +580,19 @@ relative_path: ../
<div class="row"> <div class="row">
<div class="span6"> <div class="span6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="icons-ul"> <ul class="fas-ul">
<li><a href="#"><i class="icon-li icon-double-angle-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><a href="#"><i class="fa-li fa fa-double-angle-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><a href="#"><i class="icon-li icon-arrow-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> <li><a href="#"><i class="fa-li fa fa-arrow-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><a href="#"><i class="icon-li icon-building"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><a href="#"><i class="fa-li fa fa-building"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="span6"> <div class="span6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="icons-ul"> <ul class="fas-ul">
<li><a href="#"><i class="icon-li icon-double-angle-right icon-large"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><a href="#"><i class="fa-li fa fa-double-angle-right fa-large"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><a href="#"><i class="icon-li icon-arrow-right icon-large"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> <li><a href="#"><i class="fa-li fa fa-arrow-right fa-large"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><a href="#"><i class="icon-li icon-building icon-large"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><a href="#"><i class="fa-li fa fa-building fa-large"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -600,11 +600,11 @@ relative_path: ../
<div class="row"> <div class="row">
<div class="span6"> <div class="span6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="icons-ul"> <ul class="fas-ul">
<li><i class="icon-li icon-refresh icon-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-li fa fa-refresh fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="icon-li icon-spinner icon-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> <li><i class="fa-li fa-spinner fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="icon-li icon-spinner icon-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <li><i class="fa-li fa-spinner fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="icon-building"></i> <i class="fa fa-building"></i>
<span class="label">foo</span> <span class="label">foo</span>
<a class="btn">foo</a> <a class="btn">foo</a>
</li> </li>
@ -613,11 +613,11 @@ relative_path: ../
</div> </div>
<div class="span6"> <div class="span6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="icons-ul"> <ul class="fas-ul">
<li><i class="icon-li icon-refresh icon-spin icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-li fa fa-refresh fa-spin fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="icon-li icon-spinner icon-spin icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> <li><i class="fa-li fa-spinner fa-spin fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="icon-li icon-spinner icon-spin icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <li><i class="fa-li fa-spinner fa-spin fa-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="icon-building"></i> <i class="fa fa-building"></i>
<span class="label">foo</span> <span class="label">foo</span>
<a class="btn">foo</a> <a class="btn">foo</a>
</li> </li>
@ -651,61 +651,61 @@ relative_path: ../
<h3>Spinning icons <small>icons should be aligned well and on center, buttons should be same height, won't work in ie7</small></h3> <h3>Spinning icons <small>icons should be aligned well and on center, buttons should be same height, won't work in ie7</small></h3>
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<i class="icon-refresh icon-spin"></i> Loading... <i class="fa fa-refresh fa-spin"></i> Loading...
<button class="btn btn-small"><i class="icon-refresh icon-spin"></i> Loading...</button> <button class="btn btn-small"><i class="fa fa-refresh fa-spin"></i> Loading...</button>
<button class="btn btn-small">Loading...</button> <button class="btn btn-small">Loading...</button>
<i class="icon-circle-blank icon-spin"></i> Loading... <i class="fa fa-circle-blank fa-spin"></i> Loading...
<button class="btn btn-small"><i class="icon-circle-blank icon-spin"></i> Loading...</button> <button class="btn btn-small"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button>
<a href="#"><i class="icon-refresh icon-spin"></i> Loading...</a> <a href="#"><i class="fa fa-refresh fa-spin"></i> Loading...</a>
</div> </div>
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<i class="icon-refresh icon-spin"></i> Loading... <i class="fa fa-refresh fa-spin"></i> Loading...
<button class="btn"><i class="icon-refresh icon-spin"></i> Loading...</button> <button class="btn"><i class="fa fa-refresh fa-spin"></i> Loading...</button>
<button class="btn">Loading...</button> <button class="btn">Loading...</button>
<i class="icon-circle-blank icon-spin"></i> Loading... <i class="fa fa-circle-blank fa-spin"></i> Loading...
<button class="btn"><i class="icon-circle-blank icon-spin"></i> Loading...</button> <button class="btn"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button>
</div> </div>
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<i class="icon-spinner icon-spin"></i> Loading... <i class="fa-spinner fa-spin"></i> Loading...
<button class="btn btn-large"><i class="icon-spinner icon-spin"></i> Loading...</button> <button class="btn btn-large"><i class="fa-spinner fa-spin"></i> Loading...</button>
<button class="btn btn-large">Loading...</button> <button class="btn btn-large">Loading...</button>
<i class="icon-circle-blank icon-spin"></i> Loading... <i class="fa fa-circle-blank fa-spin"></i> Loading...
<button class="btn btn-large"><i class="icon-circle-blank icon-spin"></i> Loading...</button> <button class="btn btn-large"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button>
</div> </div>
<h4>icon-large</h4> <h4>fa-large</h4>
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<i class="icon-refresh icon-large icon-spin"></i> Loading... <i class="fa fa-refresh fa-large fa-spin"></i> Loading...
<button class="btn btn-small"><i class="icon-refresh icon-large icon-spin"></i> Loading...</button> <button class="btn btn-small"><i class="fa fa-refresh fa-large fa-spin"></i> Loading...</button>
<button class="btn btn-small">Loading...</button> <button class="btn btn-small">Loading...</button>
<i class="icon-circle-blank icon-large icon-spin"></i> Loading... <i class="fa fa-circle-blank fa-large fa-spin"></i> Loading...
<button class="btn btn-small"><i class="icon-circle-blank icon-large icon-spin"></i> Loading...</button> <button class="btn btn-small"><i class="fa fa-circle-blank fa-large fa-spin"></i> Loading...</button>
</div> </div>
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<i class="icon-refresh icon-large icon-spin"></i> Loading... <i class="fa fa-refresh fa-large fa-spin"></i> Loading...
<button class="btn"><i class="icon-refresh icon-large icon-spin"></i> Loading...</button> <button class="btn"><i class="fa fa-refresh fa-large fa-spin"></i> Loading...</button>
<button class="btn">Loading...</button> <button class="btn">Loading...</button>
<i class="icon-circle-blank icon-large icon-spin"></i> Loading... <i class="fa fa-circle-blank fa-large fa-spin"></i> Loading...
<button class="btn"><i class="icon-circle-blank icon-large icon-spin"></i> Loading...</button> <button class="btn"><i class="fa fa-circle-blank fa-large fa-spin"></i> Loading...</button>
</div> </div>
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<i class="icon-spinner icon-large icon-spin"></i> Loading... <i class="fa-spinner fa-large fa-spin"></i> Loading...
<button class="btn btn-large"><i class="icon-spinner icon-large icon-spin"></i> Loading...</button> <button class="btn btn-large"><i class="fa-spinner fa-large fa-spin"></i> Loading...</button>
<button class="btn btn-large">Loading...</button> <button class="btn btn-large">Loading...</button>
<i class="icon-circle-blank icon-large icon-spin"></i> Loading... <i class="fa fa-circle-blank fa-large fa-spin"></i> Loading...
<button class="btn btn-large"><i class="icon-circle-blank icon-large icon-spin"></i> Loading...</button> <button class="btn btn-large"><i class="fa fa-circle-blank fa-large fa-spin"></i> Loading...</button>
</div> </div>
<h4>Bootstrap Prepend and Append</h4> <h4>Bootstrap Prepend and Append</h4>
<div class="row"> <div class="row">
<div class="span6"> <div class="span6">
<div class="input-prepend"> <div class="input-prepend">
<span class="add-on"><i class="icon-spinner icon-spin"></i></span> <span class="add-on"><i class="fa-spinner fa-spin"></i></span>
<input class="span2" id="prependedInput" type="text" placeholder="Username"> <input class="span2" id="prependedInput" type="text" placeholder="Username">
</div> </div>
</div> </div>
<div class="span6"> <div class="span6">
<div class="input-append"> <div class="input-append">
<input class="span2" id="appendedInput" type="text"> <input class="span2" id="appendedInput" type="text">
<span class="add-on"><i class="icon-spinner icon-spin"></i></span> <span class="add-on"><i class="fa-spinner fa-spin"></i></span>
</div> </div>
</div> </div>
</div> </div>