re-adding sprites.less reset, new test.html for visual testing, many many bug fixes, new icon

This commit is contained in:
davegandy 2012-12-24 00:40:46 -06:00
parent 9cdfdd0f1a
commit b61fa1bfd7
22 changed files with 1996 additions and 541 deletions

View file

@ -1,213 +1,703 @@
[class^="icon-"],[class*=" icon-"]{font-family:FontAwesome;font-style:normal;font-weight:normal;} [class^="icon-"],
.btn.dropdown-toggle [class^="icon-"],.btn.dropdown-toggle [class*=" icon-"]{line-height:1.4em;} [class*=" icon-"] {
.icon-large{font-size:1.3333em;} font-family: FontAwesome;
.icon-glass{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} font-style: normal;
.icon-music{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} font-weight: normal;
.icon-search{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} padding-right: .3em;
.icon-envelope{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} text-decoration: inherit;
.icon-heart{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-star{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-large {
.icon-star-empty{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} font-size: 1.3333333333333333em;
.icon-user{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} margin-top: -4px;
.icon-film{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} padding-top: 3px;
.icon-th-large{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} margin-bottom: -4px;
.icon-th{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} padding-bottom: 3px;
.icon-th-list{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} vertical-align: -10%;
.icon-ok{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-remove{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .btn [class^="icon-"],
.icon-zoom-in{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .nav [class^="icon-"],
.icon-zoom-out{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .btn [class*=" icon-"],
.icon-off{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .nav [class*=" icon-"] {
.icon-signal{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} margin-top: -4px;
.icon-cog{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} padding-top: 3px;
.icon-trash{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} margin-bottom: -4px;
.icon-home{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} padding-bottom: 3px;
.icon-file{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-time{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-glass {
.icon-road{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-download-alt{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-download{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-music {
.icon-upload{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-inbox{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-play-circle{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-search {
.icon-repeat{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-refresh{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-list-alt{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-envelope {
.icon-lock{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-flag{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-headphones{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-heart {
.icon-volume-off{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-volume-down{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-volume-up{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-star {
.icon-qrcode{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-barcode{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-tag{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-star-empty {
.icon-tags{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-book{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-bookmark{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-user {
.icon-print{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-camera{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-font{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-film {
.icon-bold{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-italic{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-text-height{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-th-large {
.icon-text-width{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-align-left{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-align-center{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-th {
.icon-align-right{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-align-justify{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-list{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-th-list {
.icon-indent-left{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-indent-right{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-facetime-video{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-ok {
.icon-picture{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-pencil{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-map-marker{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-remove {
.icon-adjust{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-tint{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-edit{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-zoom-in {
.icon-share{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-check{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-move{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-zoom-out {
.icon-step-backward{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-fast-backward{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-backward{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-off {
.icon-play{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-pause{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-stop{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-signal {
.icon-forward{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-fast-forward{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-step-forward{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-cog {
.icon-eject{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-chevron-left{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-chevron-right{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-trash {
.icon-plus-sign{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-minus-sign{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-remove-sign{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-home {
.icon-ok-sign{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-question-sign{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-info-sign{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-file {
.icon-screenshot{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-remove-circle{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-ok-circle{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-time {
.icon-ban-circle{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-arrow-left{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-arrow-right{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-road {
.icon-arrow-up{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-arrow-down{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-share-alt{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-download-alt {
.icon-resize-full{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-resize-small{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-plus{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-download {
.icon-minus{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-asterisk{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-exclamation-sign{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-upload {
.icon-gift{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-leaf{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-fire{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-inbox {
.icon-eye-open{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-eye-close{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-warning-sign{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-play-circle {
.icon-plane{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-calendar{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-random{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-repeat {
.icon-comment{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-magnet{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-chevron-up{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-refresh {
.icon-chevron-down{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-retweet{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-shopping-cart{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-list-alt {
.icon-folder-close{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-folder-open{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-resize-vertical{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-lock {
.icon-resize-horizontal{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-bar-chart{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-twitter-sign{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-flag {
.icon-facebook-sign{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-camera-retro{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-key{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-headphones {
.icon-cogs{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-comments{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-thumbs-up{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-volume-off {
.icon-thumbs-down{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-star-half{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-heart-empty{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-volume-down {
.icon-signout{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-linkedin-sign{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-pushpin{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-volume-up {
.icon-external-link{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-signin{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-trophy{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-qrcode {
.icon-github-sign{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-upload-alt{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-lemon{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-barcode {
.icon-phone{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-check-empty{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-bookmark-empty{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-tag {
.icon-phone-sign{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-twitter{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-facebook{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-tags {
.icon-github{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-unlock{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-credit-card{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-book {
.icon-rss{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-hdd{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-bullhorn{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-bookmark {
.icon-bell{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-certificate{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-hand-right{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-print {
.icon-hand-left{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-hand-up{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-hand-down{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-camera {
.icon-circle-arrow-left{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-circle-arrow-right{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-circle-arrow-up{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-font {
.icon-circle-arrow-down{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-globe{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-wrench{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-bold {
.icon-tasks{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-filter{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-briefcase{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-italic {
.icon-fullscreen{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-group{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-link{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-text-height {
.icon-cloud{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-beaker{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-cut{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-text-width {
.icon-copy{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-paper-clip{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-save{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-align-left {
.icon-sign-blank{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-reorder{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-list-ul{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-align-center {
.icon-list-ol{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-strikethrough{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-underline{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-align-right {
.icon-table{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-magic{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-truck{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-align-justify {
.icon-pinterest{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-pinterest-sign{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-google-plus-sign{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-list {
.icon-google-plus{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-money{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-caret-down{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-indent-left {
.icon-caret-up{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-caret-left{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-caret-right{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-indent-right {
.icon-columns{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-sort{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-sort-down{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-facetime-video {
.icon-sort-up{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-envelope-alt{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-linkedin{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-picture {
.icon-undo{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-legal{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-dashboard{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-pencil {
.icon-comment-alt{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-comments-alt{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-bolt{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-map-marker {
.icon-sitemap{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
.icon-umbrella{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} }
.icon-paste{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} .icon-adjust {
.icon-user-md{*zoom:expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');} *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-tint {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-edit {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-share {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-check {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-move {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-step-backward {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-fast-backward {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-backward {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-play {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-pause {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-stop {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-forward {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-fast-forward {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-step-forward {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-eject {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-chevron-left {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-chevron-right {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-plus-sign {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-minus-sign {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-remove-sign {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-ok-sign {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-question-sign {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-info-sign {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-screenshot {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-remove-circle {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-ok-circle {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-ban-circle {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-arrow-left {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-arrow-right {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-arrow-up {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-arrow-down {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-share-alt {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-resize-full {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-resize-small {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-plus {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-minus {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-asterisk {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-exclamation-sign {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-gift {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-leaf {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-fire {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-eye-open {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-eye-close {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-warning-sign {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-plane {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-calendar {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-random {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-comment {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-magnet {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-chevron-up {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-chevron-down {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-retweet {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-shopping-cart {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-folder-close {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-folder-open {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-resize-vertical {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-resize-horizontal {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-bar-chart {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-twitter-sign {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-facebook-sign {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-camera-retro {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-key {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-cogs {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-comments {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-thumbs-up {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-thumbs-down {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-star-half {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-heart-empty {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-signout {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-linkedin-sign {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-pushpin {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-external-link {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-signin {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-trophy {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-github-sign {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-upload-alt {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-lemon {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-phone {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-check-empty {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-bookmark-empty {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-phone-sign {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-twitter {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-facebook {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-github {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-unlock {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-credit-card {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-rss {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-hdd {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-bullhorn {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-bell {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-certificate {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-hand-right {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-hand-left {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-hand-up {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-hand-down {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-circle-arrow-left {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-circle-arrow-right {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-circle-arrow-up {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-circle-arrow-down {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-globe {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-wrench {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-tasks {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-filter {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-briefcase {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-fullscreen {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-group {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-link {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-cloud {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-beaker {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-cut {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-copy {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-paper-clip {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-save {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-sign-blank {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-reorder {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-list-ul {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-list-ol {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-strikethrough {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-underline {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-table {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-magic {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-truck {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-pinterest {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-pinterest-sign {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-google-plus-sign {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-google-plus {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-money {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-caret-down {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-caret-up {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-caret-left {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-caret-right {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-columns {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-sort {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-sort-down {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-sort-up {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-envelope-alt {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-linkedin {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-undo {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-legal {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-dashboard {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-comment-alt {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-comments-alt {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-bolt {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-sitemap {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-umbrella {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-paste {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-lightbulb {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-exchange {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-cloud-download {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-cloud-upload {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-user-md {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-stethoscope {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-briefcase {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-bell-alt {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-coffee {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-food {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-file-alt {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-building {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-hospital {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-ambulance {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-medkit {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-fighter-jet {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-beer {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}

View file

@ -1889,6 +1889,457 @@ table th[class*="span"],
.table-hover tbody tr.info:hover td { .table-hover tbody tr.info:hover td {
background-color: #c4e3f3; background-color: #c4e3f3;
} }
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
*margin-right: .3em;
line-height: 14px;
vertical-align: text-top;
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
margin-top: 1px;
}
/* White icons with optional class, or on hover/active states of certain elements */
.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
background-image: url("../img/glyphicons-halflings-white.png");
}
.icon-glass {
background-position: 0 0;
}
.icon-music {
background-position: -24px 0;
}
.icon-search {
background-position: -48px 0;
}
.icon-envelope {
background-position: -72px 0;
}
.icon-heart {
background-position: -96px 0;
}
.icon-star {
background-position: -120px 0;
}
.icon-star-empty {
background-position: -144px 0;
}
.icon-user {
background-position: -168px 0;
}
.icon-film {
background-position: -192px 0;
}
.icon-th-large {
background-position: -216px 0;
}
.icon-th {
background-position: -240px 0;
}
.icon-th-list {
background-position: -264px 0;
}
.icon-ok {
background-position: -288px 0;
}
.icon-remove {
background-position: -312px 0;
}
.icon-zoom-in {
background-position: -336px 0;
}
.icon-zoom-out {
background-position: -360px 0;
}
.icon-off {
background-position: -384px 0;
}
.icon-signal {
background-position: -408px 0;
}
.icon-cog {
background-position: -432px 0;
}
.icon-trash {
background-position: -456px 0;
}
.icon-home {
background-position: 0 -24px;
}
.icon-file {
background-position: -24px -24px;
}
.icon-time {
background-position: -48px -24px;
}
.icon-road {
background-position: -72px -24px;
}
.icon-download-alt {
background-position: -96px -24px;
}
.icon-download {
background-position: -120px -24px;
}
.icon-upload {
background-position: -144px -24px;
}
.icon-inbox {
background-position: -168px -24px;
}
.icon-play-circle {
background-position: -192px -24px;
}
.icon-repeat {
background-position: -216px -24px;
}
.icon-refresh {
background-position: -240px -24px;
}
.icon-list-alt {
background-position: -264px -24px;
}
.icon-lock {
background-position: -287px -24px;
}
.icon-flag {
background-position: -312px -24px;
}
.icon-headphones {
background-position: -336px -24px;
}
.icon-volume-off {
background-position: -360px -24px;
}
.icon-volume-down {
background-position: -384px -24px;
}
.icon-volume-up {
background-position: -408px -24px;
}
.icon-qrcode {
background-position: -432px -24px;
}
.icon-barcode {
background-position: -456px -24px;
}
.icon-tag {
background-position: 0 -48px;
}
.icon-tags {
background-position: -25px -48px;
}
.icon-book {
background-position: -48px -48px;
}
.icon-bookmark {
background-position: -72px -48px;
}
.icon-print {
background-position: -96px -48px;
}
.icon-camera {
background-position: -120px -48px;
}
.icon-font {
background-position: -144px -48px;
}
.icon-bold {
background-position: -167px -48px;
}
.icon-italic {
background-position: -192px -48px;
}
.icon-text-height {
background-position: -216px -48px;
}
.icon-text-width {
background-position: -240px -48px;
}
.icon-align-left {
background-position: -264px -48px;
}
.icon-align-center {
background-position: -288px -48px;
}
.icon-align-right {
background-position: -312px -48px;
}
.icon-align-justify {
background-position: -336px -48px;
}
.icon-list {
background-position: -360px -48px;
}
.icon-indent-left {
background-position: -384px -48px;
}
.icon-indent-right {
background-position: -408px -48px;
}
.icon-facetime-video {
background-position: -432px -48px;
}
.icon-picture {
background-position: -456px -48px;
}
.icon-pencil {
background-position: 0 -72px;
}
.icon-map-marker {
background-position: -24px -72px;
}
.icon-adjust {
background-position: -48px -72px;
}
.icon-tint {
background-position: -72px -72px;
}
.icon-edit {
background-position: -96px -72px;
}
.icon-share {
background-position: -120px -72px;
}
.icon-check {
background-position: -144px -72px;
}
.icon-move {
background-position: -168px -72px;
}
.icon-step-backward {
background-position: -192px -72px;
}
.icon-fast-backward {
background-position: -216px -72px;
}
.icon-backward {
background-position: -240px -72px;
}
.icon-play {
background-position: -264px -72px;
}
.icon-pause {
background-position: -288px -72px;
}
.icon-stop {
background-position: -312px -72px;
}
.icon-forward {
background-position: -336px -72px;
}
.icon-fast-forward {
background-position: -360px -72px;
}
.icon-step-forward {
background-position: -384px -72px;
}
.icon-eject {
background-position: -408px -72px;
}
.icon-chevron-left {
background-position: -432px -72px;
}
.icon-chevron-right {
background-position: -456px -72px;
}
.icon-plus-sign {
background-position: 0 -96px;
}
.icon-minus-sign {
background-position: -24px -96px;
}
.icon-remove-sign {
background-position: -48px -96px;
}
.icon-ok-sign {
background-position: -72px -96px;
}
.icon-question-sign {
background-position: -96px -96px;
}
.icon-info-sign {
background-position: -120px -96px;
}
.icon-screenshot {
background-position: -144px -96px;
}
.icon-remove-circle {
background-position: -168px -96px;
}
.icon-ok-circle {
background-position: -192px -96px;
}
.icon-ban-circle {
background-position: -216px -96px;
}
.icon-arrow-left {
background-position: -240px -96px;
}
.icon-arrow-right {
background-position: -264px -96px;
}
.icon-arrow-up {
background-position: -289px -96px;
}
.icon-arrow-down {
background-position: -312px -96px;
}
.icon-share-alt {
background-position: -336px -96px;
}
.icon-resize-full {
background-position: -360px -96px;
}
.icon-resize-small {
background-position: -384px -96px;
}
.icon-plus {
background-position: -408px -96px;
}
.icon-minus {
background-position: -433px -96px;
}
.icon-asterisk {
background-position: -456px -96px;
}
.icon-exclamation-sign {
background-position: 0 -120px;
}
.icon-gift {
background-position: -24px -120px;
}
.icon-leaf {
background-position: -48px -120px;
}
.icon-fire {
background-position: -72px -120px;
}
.icon-eye-open {
background-position: -96px -120px;
}
.icon-eye-close {
background-position: -120px -120px;
}
.icon-warning-sign {
background-position: -144px -120px;
}
.icon-plane {
background-position: -168px -120px;
}
.icon-calendar {
background-position: -192px -120px;
}
.icon-random {
background-position: -216px -120px;
width: 16px;
}
.icon-comment {
background-position: -240px -120px;
}
.icon-magnet {
background-position: -264px -120px;
}
.icon-chevron-up {
background-position: -288px -120px;
}
.icon-chevron-down {
background-position: -313px -119px;
}
.icon-retweet {
background-position: -336px -120px;
}
.icon-shopping-cart {
background-position: -360px -120px;
}
.icon-folder-close {
background-position: -384px -120px;
}
.icon-folder-open {
background-position: -408px -120px;
width: 16px;
}
.icon-resize-vertical {
background-position: -432px -119px;
}
.icon-resize-horizontal {
background-position: -456px -118px;
}
.icon-hdd {
background-position: 0 -144px;
}
.icon-bullhorn {
background-position: -24px -144px;
}
.icon-bell {
background-position: -48px -144px;
}
.icon-certificate {
background-position: -72px -144px;
}
.icon-thumbs-up {
background-position: -96px -144px;
}
.icon-thumbs-down {
background-position: -120px -144px;
}
.icon-hand-right {
background-position: -144px -144px;
}
.icon-hand-left {
background-position: -168px -144px;
}
.icon-hand-up {
background-position: -192px -144px;
}
.icon-hand-down {
background-position: -216px -144px;
}
.icon-circle-arrow-right {
background-position: -240px -144px;
}
.icon-circle-arrow-left {
background-position: -264px -144px;
}
.icon-circle-arrow-up {
background-position: -288px -144px;
}
.icon-circle-arrow-down {
background-position: -312px -144px;
}
.icon-globe {
background-position: -336px -144px;
}
.icon-wrench {
background-position: -360px -144px;
}
.icon-tasks {
background-position: -384px -144px;
}
.icon-filter {
background-position: -408px -144px;
}
.icon-briefcase {
background-position: -432px -144px;
}
.icon-fullscreen {
background-position: -456px -144px;
}
.dropup, .dropup,
.dropdown { .dropdown {
position: relative; position: relative;
@ -4685,6 +5136,13 @@ a.badge:hover {
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face {
font-family: 'proxima-nova';
src: url('../font/proximanova-sbold-webfont.eot');
src: url('../font/proximanova-sbold-webfont.eot?#iefix') format('embedded-opentype'), url('../font/proximanova-sbold-webfont.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
/* Font Awesome /* Font Awesome
the iconic font designed for use with Twitter Bootstrap the iconic font designed for use with Twitter Bootstrap
------------------------------------------------------- -------------------------------------------------------
@ -4711,7 +5169,7 @@ a.badge:hover {
@font-face { @font-face {
font-family: 'FontAwesome'; font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot'); src: url('../font/fontawesome-webfont.eot');
src: url('../font/FontAwesome.otf') format('opentype'); src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@ -4722,9 +5180,21 @@ a.badge:hover {
font-family: FontAwesome; font-family: FontAwesome;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
display: inline-block;
text-decoration: inherit; text-decoration: inherit;
} }
/* sprites.less reset */
[class^="icon-"],
[class*=" icon-"] {
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none !important;
background-position: 0% 0%;
background-repeat: repeat;
margin-top: 0;
}
/* makes sure icons active on rollover in links */
a [class^="icon-"], a [class^="icon-"],
a [class*=" icon-"] { a [class*=" icon-"] {
display: inline-block; display: inline-block;
@ -4732,27 +5202,36 @@ a [class*=" icon-"] {
} }
/* makes the font 33% larger relative to the icon container */ /* makes the font 33% larger relative to the icon container */
.icon-large:before { .icon-large:before {
font-size: 1.25em; vertical-align: -15%;
font-size: 1.3333333333333333em;
} }
.btn [class^="icon-"], .btn [class^="icon-"],
.nav-tabs [class^="icon-"], .nav [class^="icon-"],
.btn [class*=" icon-"], .btn [class*=" icon-"],
.nav-tabs [class*=" icon-"] { .nav [class*=" icon-"] {
/* keeps button heights with and without icons the same */ /* keeps button heights with and without icons the same */
line-height: .9em; line-height: .9em;
} }
.btn [class^="icon-"].icon-large,
.nav [class^="icon-"].icon-large,
.btn [class*=" icon-"].icon-large,
.nav [class*=" icon-"].icon-large {
line-height: .8em;
}
li [class^="icon-"], li [class^="icon-"],
li [class*=" icon-"] { li [class*=" icon-"] {
display: inline-block; display: inline-block;
width: 1.25em; width: 1.25em;
text-align: center; text-align: center;
} }
li .icon-large:before, li [class^="icon-"].icon-large,
li .icon-large:before { li [class*=" icon-"].icon-large,
li [class^="icon-"].icon-large,
li [class*=" icon-"].icon-large {
/* 1.5 increased font size for icon-large * 1.25 width */ /* 1.5 increased font size for icon-large * 1.25 width */
width: 1.875em; width: 1.5625em;
} }
ul.icons { ul.icons {
list-style-type: none; list-style-type: none;
@ -4761,7 +5240,7 @@ ul.icons {
} }
ul.icons li [class^="icon-"], ul.icons li [class^="icon-"],
ul.icons li [class*=" icon-"] { ul.icons li [class*=" icon-"] {
width: .8em; width: 1.5em;
} }
ul.icons li .icon-large:before, ul.icons li .icon-large:before,
ul.icons li .icon-large:before { ul.icons li .icon-large:before {
@ -4769,6 +5248,62 @@ ul.icons li .icon-large:before {
vertical-align: initial; vertical-align: initial;
} }
/* Convenience functions */
.icon-border {
border: solid 1px #eeeeee;
padding: .2em .35em .1em;
-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;
}
.icon-3x {
font-size: 3em;
}
.icon-3x.icon-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;
}
.icon-2x,
.icon-3x,
.icon-4x {
line-height: 1em;
}
[class^="icon-"].pull-left,
[class*=" icon-"].pull-left {
margin-right: .35em;
}
[class^="icon-"].pull-left.icon-4x,
[class*=" icon-"].pull-left.icon-4x {
margin-right: .25em;
}
[class^="icon-"].pull-right,
[class*=" icon-"].pull-right {
margin-left: .35em;
}
[class^="icon-"].pull-right.icon-4x,
[class*=" icon-"].pull-right.icon-4x {
margin-left: .25em;
}
/* 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 { .icon-glass:before {
@ -5414,7 +5949,7 @@ ul.icons li .icon-large:before {
.icon-user-md:before { .icon-user-md:before {
content: "\f200"; content: "\f200";
} }
.icon-stethescope:before { .icon-stethoscope:before {
content: "\f201"; content: "\f201";
} }
.icon-briefcase:before { .icon-briefcase:before {
@ -5442,15 +5977,27 @@ ul.icons li .icon-large:before {
content: "\f209"; content: "\f209";
} }
.icon-medkit:before { .icon-medkit:before {
content: "\f210"; content: "\f20a";
} }
.icon-fighter-jet:before { .icon-fighter-jet:before {
content: "\f211"; content: "\f20b";
}
.icon-beer:before {
content: "\f20c";
}
.text-align-right {
text-align: right;
}
.text-align-center {
text-align: center;
} }
.navbar .brand { .navbar .brand {
color: #ffffff; color: #ffffff;
font-family: museo-slab, "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: museo-slab, "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
.navbar .brand .icon-flag {
padding-right: 3px;
}
.navbar .nav > li > a { .navbar .nav > li > a {
padding: 12px 10px 9px; padding: 12px 10px 9px;
} }
@ -5463,91 +6010,74 @@ h6 {
font-family: museo-slab, "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: museo-slab, "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
#iconCarousel { #iconCarousel {
float: right; font-size: 280px;
width: 297px;
height: 275px;
margin-right: 10px;
font-size: 275px;
text-align: center; text-align: center;
line-height: 285px;
text-shadow: 2px 2px 3px #222222; text-shadow: 2px 2px 3px #222222;
} }
#iconCarousel a { #iconCarousel a {
color: #ffffff; color: #ffffff;
} }
#iconCarousel .carousel-control { #iconCarousel .carousel-control {
top: 308px; top: 313px;
width: 23px; width: 23px;
height: 23px; height: 23px;
border-width: 3px; border-width: 3px;
font-size: 17px; font-size: 17px;
line-height: 22px; line-height: 25px;
left: 114.5px; left: 117px;
} }
#iconCarousel .carousel-control.right { #iconCarousel .carousel-control.right {
left: auto; left: auto;
right: 114.5px; right: 117px;
} }
.hero-unit { #fort-awesome .alert {
margin-bottom: 20px; padding: 30px;
padding-top: 80px; }
-webkit-border-radius: 0; .jumbotron {
-moz-border-radius: 0; padding: 90px 0 48px;
border-radius: 0;
background-color: #9d261d; background-color: #9d261d;
text-shadow: 2px 2px 2px #333333; text-shadow: 2px 2px 2px #333333;
} }
.hero-unit, .jumbotron,
.hero-unit h1 { .jumbotron h1 {
color: #ffffff; color: #ffffff;
} }
.hero-unit h1 { .jumbotron h1 {
font-size: 75px; font-size: 80px;
letter-spacing: -2px; letter-spacing: -2px;
line-height: 1.2; line-height: 1.2;
} }
.hero-unit p { .jumbotron p {
margin-top: 15px; margin-top: 10px;
margin-bottom: 20px; margin-bottom: 30px;
font-size: 40px; font-size: 30px;
line-height: 1.2; line-height: 1.3;
} }
.hero-unit ul { .jumbotron ul {
margin-left: 50px; margin-left: 50px;
} }
.hero-unit ul li { .jumbotron ul li {
font-size: 15px; font-size: 15px;
line-height: 30px; line-height: 30px;
text-shadow: 1px 1px 1px #333333; text-shadow: 1px 1px 1px #333333;
} }
.hero-unit ul li.icon-large:before { .jumbotron ul li.icon-large:before {
text-indent: -2em; text-indent: -2em;
vertical-align: baseline; vertical-align: baseline;
} }
.hero-unit .btn-large { .jumbotron .btn-large {
font-family: museo-slab, "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: museo-slab, "Helvetica Neue", Helvetica, Arial, sans-serif;
margin-top: 15px;
font-weight: bold; font-weight: bold;
font-size: 18px; font-size: 18px;
padding: 13px 22px; padding: 13px 22px;
padding-left: 64px;
margin-right: 10px; margin-right: 10px;
-webkit-border-radius: 6px; -webkit-border-radius: 8px;
-moz-border-radius: 6px; -moz-border-radius: 8px;
border-radius: 6px; border-radius: 8px;
position: relative;
text-align: left; text-align: left;
} }
.hero-unit .btn-large i { .jumbotron .hero-content {
position: absolute;
top: 8px;
left: 15px;
font-size: 46px;
}
.hero-unit .btn-large.btn-github {
padding-left: 66px;
}
.hero-unit .hero-content {
width: 650px;
text-align: center; text-align: center;
} }
.btn-primary { .btn-primary {
@ -5558,49 +6088,24 @@ h6 {
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25); text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
color: #333333; color: #333333;
} }
section {
padding-top: 40px;
}
#social-buttons { #social-buttons {
margin-bottom: 30px; padding: 22px 0;
text-align: center; text-align: center;
background-color: #f5f5f5;
border-top: 1px solid #fff;
border-bottom: 1px solid #ddd;
} }
#social-buttons .btn { #social-buttons .btn {
font-family: museo-slab, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold; font-weight: bold;
font-size: 14px; padding: 0px 5px;
padding: 4px 10px 1px; line-height: 17px;
line-height: 20px;
} }
#social-buttons .count.btn { #social-buttons .count.btn {
font-family: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif; background: #ffffff;
font-weight: normal; font-weight: normal;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #ffffff;
background-image: -moz-linear-gradient(top, #ffffff, #ffffff);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#ffffff));
background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
background-image: -o-linear-gradient(top, #ffffff, #ffffff);
background-image: linear-gradient(to bottom, #ffffff, #ffffff);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffffffff', GradientType=0);
border-color: #ffffff #ffffff #d9d9d9;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #ffffff;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
#social-buttons .count.btn:hover,
#social-buttons .count.btn:active,
#social-buttons .count.btn.active,
#social-buttons .count.btn.disabled,
#social-buttons .count.btn[disabled] {
color: #ffffff;
background-color: #ffffff;
*background-color: #f2f2f2;
}
#social-buttons .count.btn:active,
#social-buttons .count.btn.active {
background-color: #e6e6e6 \9;
} }
#social-buttons .watch, #social-buttons .watch,
#social-buttons .fork { #social-buttons .fork {
@ -5608,7 +6113,7 @@ h6 {
} }
.the-icons { .the-icons {
list-style-type: none; list-style-type: none;
margin-left: 0; margin: 0;
} }
.the-icons li { .the-icons li {
cursor: pointer; cursor: pointer;
@ -5637,17 +6142,12 @@ h6 {
font-size: 28px; font-size: 28px;
vertical-align: -5px; vertical-align: -5px;
} }
#all-icons h3,
#new-icons h3 {
margin-top: 10px;
}
#why .row { #why .row {
margin-bottom: 20px; margin-bottom: 20px;
} }
#why .icon-large { #why .icon-large {
font-size: 22px; font-size: 22px;
text-align: center; padding-right: 5px;
padding-right: 4px;
} }
#examples .btn-toolbar { #examples .btn-toolbar {
margin-top: 0; margin-top: 0;
@ -5716,8 +6216,8 @@ h6 {
width: 330px; width: 330px;
} }
.modal .modal-body .icon6 > div.thumbnail > div { .modal .modal-body .icon6 > div.thumbnail > div {
line-height: 280px; line-height: 308px;
height: 280px; height: 294px;
text-align: center; text-align: center;
} }
.modal .modal-body .icon6 > div.thumbnail > div i { .modal .modal-body .icon6 > div.thumbnail > div i {
@ -5727,8 +6227,8 @@ h6 {
width: 180px; width: 180px;
} }
.modal .modal-body .icon5 > div.thumbnail > div { .modal .modal-body .icon5 > div.thumbnail > div {
line-height: 140px; line-height: 154px;
height: 140px; height: 147px;
text-align: center; text-align: center;
} }
.modal .modal-body .icon5 > div.thumbnail > div i { .modal .modal-body .icon5 > div.thumbnail > div i {
@ -5738,8 +6238,8 @@ h6 {
width: 215px; width: 215px;
} }
.modal .modal-body .icon4 > div.thumbnail > div { .modal .modal-body .icon4 > div.thumbnail > div {
line-height: 112px; line-height: 123.20000000000002px;
height: 112px; height: 117.60000000000001px;
text-align: center; text-align: center;
} }
.modal .modal-body .icon4 > div.thumbnail > div i { .modal .modal-body .icon4 > div.thumbnail > div i {
@ -5749,8 +6249,8 @@ h6 {
width: 120px; width: 120px;
} }
.modal .modal-body .icon3 > div.thumbnail > div { .modal .modal-body .icon3 > div.thumbnail > div {
line-height: 56px; line-height: 61.60000000000001px;
height: 56px; height: 58.800000000000004px;
text-align: center; text-align: center;
} }
.modal .modal-body .icon3 > div.thumbnail > div i { .modal .modal-body .icon3 > div.thumbnail > div i {
@ -5760,8 +6260,8 @@ h6 {
width: 75px; width: 75px;
} }
.modal .modal-body .icon2 > div.thumbnail > div { .modal .modal-body .icon2 > div.thumbnail > div {
line-height: 28px; line-height: 30.800000000000004px;
height: 28px; height: 29.400000000000002px;
text-align: center; text-align: center;
} }
.modal .modal-body .icon2 > div.thumbnail > div i { .modal .modal-body .icon2 > div.thumbnail > div i {
@ -5771,8 +6271,8 @@ h6 {
width: 60px; width: 60px;
} }
.modal .modal-body .icon1 > div.thumbnail > div { .modal .modal-body .icon1 > div.thumbnail > div {
line-height: 14px; line-height: 15.400000000000002px;
height: 14px; height: 14.700000000000001px;
text-align: center; text-align: center;
} }
.modal .modal-body .icon1 > div.thumbnail > div i { .modal .modal-body .icon1 > div.thumbnail > div i {

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.5 KiB

6
docs/assets/js/bootstrap-222.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View file

@ -1,21 +1,36 @@
[class^="icon-"], [class^="icon-"],
[class*=" icon-"] { [class*=" icon-"] {
font-family: FontAwesome; font-family:FontAwesome;
font-style: normal; font-style:normal;
font-weight: normal; font-weight:normal;
} padding-right:.3em;
text-decoration: inherit;
.btn.dropdown-toggle [class^="icon-"], .btn.dropdown-toggle [class*=" icon-"] {
/* keeps button heights with and without icons the same */
line-height: 1.4em;
} }
.icon-large { .icon-large {
font-size: 1.3333em; font-size: 4/3em;
margin-top: -4px;
padding-top: 3px;
margin-bottom: -4px;
padding-bottom: 3px;
vertical-align: -10%;
} }
.btn, .nav {
[class^="icon-"],
[class*=" icon-"] {
margin-top: -4px;
padding-top: 3px;
margin-bottom: -4px;
padding-bottom: 3px;
}
}
.ie7icon(@inner) { .ie7icon(@inner) {
*zoom: ~"expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '@{inner} ')"; *zoom: ~"expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '@{inner}')";
} }
.icon-glass { .ie7icon(''); } .icon-glass { .ie7icon(''); }
@ -241,5 +256,21 @@
.icon-sitemap { .ie7icon(''); } .icon-sitemap { .ie7icon(''); }
.icon-umbrella { .ie7icon(''); } .icon-umbrella { .ie7icon(''); }
.icon-paste { .ie7icon(''); } .icon-paste { .ie7icon(''); }
.icon-lightbulb { .ie7icon(''); }
.icon-exchange { .ie7icon(''); }
.icon-cloud-download { .ie7icon(''); }
.icon-cloud-upload { .ie7icon(''); }
.icon-user-md { .ie7icon(''); } .icon-user-md { .ie7icon(''); }
.icon-stethoscope { .ie7icon(''); }
.icon-briefcase { .ie7icon(''); }
.icon-bell-alt { .ie7icon(''); }
.icon-coffee { .ie7icon(''); }
.icon-food { .ie7icon(''); }
.icon-file-alt { .ie7icon(''); }
.icon-building { .ie7icon(''); }
.icon-hospital { .ie7icon(''); }
.icon-ambulance { .ie7icon(''); }
.icon-medkit { .ie7icon(''); }
.icon-fighter-jet { .ie7icon(''); }
.icon-beer { .ie7icon(''); }

View file

@ -22,16 +22,19 @@
*/ */
@FontAwesomePath: "../font";
@font-face { @font-face {
font-family: 'FontAwesome'; font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot'); src: url('@{FontAwesomePath}/fontawesome-webfont.eot');
// src: url('../font/fontawesome-webfont.eot'); src: url('@{FontAwesomePath}/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
// src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('@{FontAwesomePath}/fontawesome-webfont.woff') format('woff'),
// url('../font/fontawesome-webfont.woff') format('woff'), url('@{FontAwesomePath}/fontawesome-webfont.ttf') format('truetype');
// url('../font/fontawesome-webfont.ttf') format('truetype'), // url('../font/fontawesome-webfont.ttf') format('truetype'),
// url('../font/fontawesome-webfont.svg#FontAwesome') format('svg'); // url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
src: url('../font/FontAwesome.otf') format('opentype'); // src: url('../font/FontAwesome.otf') format('opentype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
@ -44,10 +47,25 @@
font-family: FontAwesome; font-family: FontAwesome;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
display: inline-block; // display: inline-block;
text-decoration: inherit; text-decoration: inherit;
} }
/* sprites.less reset */
[class^="icon-"],
[class*=" icon-"] {
// display: inline;
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none !important;
background-position: 0% 0%;
background-repeat: repeat;
margin-top: 0;
}
/* makes sure icons active on rollover in links */
a [class^="icon-"], a [class^="icon-"],
a [class*=" icon-"] { a [class*=" icon-"] {
display: inline-block; display: inline-block;
@ -56,15 +74,18 @@ a [class*=" icon-"] {
/* makes the font 33% larger relative to the icon container */ /* makes the font 33% larger relative to the icon container */
.icon-large:before { .icon-large:before {
// vertical-align: middle; vertical-align: -15%;
font-size: 1.25em; font-size: 4/3em;
} }
.btn, .nav-tabs { .btn, .nav {
[class^="icon-"], [class^="icon-"],
[class*=" icon-"] { [class*=" icon-"] {
/* keeps button heights with and without icons the same */ /* keeps button heights with and without icons the same */
line-height: .9em; line-height: .9em;
&.icon-large {
line-height: .8em;
}
} }
} }
@ -74,11 +95,11 @@ li {
display: inline-block; display: inline-block;
width: 1.25em; width: 1.25em;
text-align: center; text-align: center;
} &.icon-large,
.icon-large:before, &.icon-large {
.icon-large:before {
/* 1.5 increased font size for icon-large * 1.25 width */ /* 1.5 increased font size for icon-large * 1.25 width */
width: 1.5*1.25em; width: 1.25*1.25em;
}
} }
} }
@ -90,7 +111,7 @@ ul.icons {
li { li {
[class^="icon-"], [class^="icon-"],
[class*=" icon-"] { [class*=" icon-"] {
width: .8em; width: 1.5em;
} }
.icon-large:before, .icon-large:before,
.icon-large:before { .icon-large:before {
@ -101,6 +122,65 @@ ul.icons {
} }
} }
/* Convenience functions */
// Icon Borders
// -------------------------
.icon-border {
border: solid 1px @grayLighter;
padding: .2em .35em .1em;
.border-radius(3px);
}
// Icon Sizes
// -------------------------
.icon-2x {
font-size: 2em;
&.icon-border {
border-width: 2px;
.border-radius(4px);
}
}
.icon-3x {
font-size: 3em;
&.icon-border {
border-width: 3px;
.border-radius(5px);
}
}
.icon-4x {
font-size: 4em;
&.icon-border {
border-width: 4px;
.border-radius(6px);
}
}
.icon-2x,
.icon-3x,
.icon-4x {
line-height: 1em;
}
// Icon Floats
// -------------------------
[class^="icon-"],
[class*=" icon-"] {
&.pull-left {
margin-right: .35em;
&.icon-4x { margin-right: .25em; }
}
&.pull-right {
margin-left: .35em;
&.icon-4x { margin-left: .25em; }
}
}
/* 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: "\f000"; } .icon-glass:before { content: "\f000"; }
@ -333,7 +413,7 @@ ul.icons {
.icon-cloud-upload:before { content: "\f0ee"; } .icon-cloud-upload:before { content: "\f0ee"; }
.icon-user-md:before { content: "\f200"; } .icon-user-md:before { content: "\f200"; }
.icon-stethescope:before { content: "\f201"; } .icon-stethoscope:before { content: "\f201"; }
.icon-briefcase:before { content: "\f202"; } .icon-briefcase:before { content: "\f202"; }
.icon-bell-alt:before { content: "\f203"; } .icon-bell-alt:before { content: "\f203"; }
.icon-coffee:before { content: "\f204"; } .icon-coffee:before { content: "\f204"; }
@ -342,9 +422,9 @@ ul.icons {
.icon-building:before { content: "\f207"; } .icon-building:before { content: "\f207"; }
.icon-hospital:before { content: "\f208"; } .icon-hospital:before { content: "\f208"; }
.icon-ambulance:before { content: "\f209"; } .icon-ambulance:before { content: "\f209"; }
.icon-medkit:before { content: "\f210"; } .icon-medkit:before { content: "\f20a"; }
.icon-fighter-jet:before { content: "\f211"; } .icon-fighter-jet:before { content: "\f20b"; }
//.icon-user-md:before { content: "\f212"; } .icon-beer:before { content: "\f20c"; }
//.icon-user-md:before { content: "\f213"; } //.icon-user-md:before { content: "\f213"; }
//.icon-user-md:before { content: "\f214"; } //.icon-user-md:before { content: "\f214"; }
//.icon-user-md:before { content: "\f215"; } //.icon-user-md:before { content: "\f215"; }

View file

@ -24,3 +24,12 @@
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face {
font-family: 'proxima-nova';
src: url('../font/proximanova-sbold-webfont.eot');
src: url('../font/proximanova-sbold-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/proximanova-sbold-webfont.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}

View file

@ -37,7 +37,7 @@
.icon-size (@size: 12px, @width-multiplier: .9, @height-multiplier: 1) { .icon-size (@size: 12px, @width-multiplier: .9, @height-multiplier: 1) {
i { font-size: @size; } i { font-size: @size; }
line-height: @size; line-height: @size * 1.1;
height: @size * @height-multiplier; height: @size * @height-multiplier * 1.05;
text-align: center; text-align: center;
} }

View file

@ -5,6 +5,9 @@
@import "font-site.less"; @import "font-site.less";
@import "font-awesome.less"; @import "font-awesome.less";
.text-align-right { text-align: right; }
.text-align-center { text-align: center; }
// These accomodate navbar-fixed-top // These accomodate navbar-fixed-top
//#overview { padding-top: 60px; } //#overview { padding-top: 60px; }
//#new-icons, #all-icons, #examples, #integration, #code, #roadmap { //#new-icons, #all-icons, #examples, #integration, #code, #roadmap {
@ -14,6 +17,7 @@
// padding: 11px 20px 9px; // padding: 11px 20px 9px;
color: @white; color: @white;
font-family: @serifFontFamily; font-family: @serifFontFamily;
.icon-flag { padding-right: 3px; }
} }
@ -25,22 +29,18 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
#iconCarousel { #iconCarousel {
a { color: @white; } a { color: @white; }
@size: 275px; // border: solid 1px @white;
float: right; @size: 280px;
width: @size * 1.08;
height: @size;
// border: solid 1px white;
margin-right: 10px;
// margin-top: -20px;
font-size: @size; font-size: @size;
text-align: center; text-align: center;
line-height: @size + 5;
text-shadow: 2px 2px 3px @grayDarker; text-shadow: 2px 2px 3px @grayDarker;
.carousel-control { .carousel-control {
top: @size + 33; top: @size + 33px;
.square(23px); .square(23px);
border-width: 3px; border-width: 3px;
font-size: 17px; font-size: 17px;
line-height: 22px; line-height: 25px;
left: @size / 2 - 23; left: @size / 2 - 23;
&.right { &.right {
left: auto; left: auto;
@ -49,6 +49,10 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
} }
} }
#fort-awesome .alert {
padding: 30px;
}
//a[href^='http://'] { //a[href^='http://'] {
// &:after { // &:after {
// font-family: FontAwesome; // font-family: FontAwesome;
@ -59,23 +63,36 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
// } // }
//} //}
.hero-unit { .jumbotron {
margin-bottom: 20px; // margin-bottom: 0;
padding-top: 80px; padding: 90px 0 48px;
.border-radius(0); // .border-radius(0);
// #gradient > .radial( lighten(@red, 10%), @red); // #gradient > .radial( lighten(@red, 10%), @red);
background-color: @red; background-color: @red;
&, h1 { color: @white; } &, h1 { color: @white; }
// &:after {
// content:'';
// display:block;
// position:absolute;
// top:0;
// right:0;
// bottom:0;
// left:0;
// background:url(../img/grain-tm400.png);
// opacity:.5;
// }
h1 { h1 {
font-size: 75px; font-size: 80px;
letter-spacing: -2px; letter-spacing: -2px;
line-height: 1.2; line-height: 1.2;
} }
p { p {
margin-top: 15px; margin-top: 10px;
margin-bottom: 20px; margin-bottom: 30px;
font-size: 40px; font-size: 30px;
line-height: 1.2; line-height: 1.3;
} }
text-shadow: 2px 2px 2px @grayDark; text-shadow: 2px 2px 2px @grayDark;
ul { ul {
@ -92,31 +109,30 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
} }
// a { color: #fffeb8; } // a { color: #fffeb8; }
.btn-large { .btn-large {
// .buttonBackground(@white, #bbb); //// .buttonBackground(@white, #bbb);
font-family: @serifFontFamily; font-family: @serifFontFamily;
// color: @grayDark; //// color: @grayDark;
margin-top: 15px; // margin-top: 15px;
font-weight: bold; font-weight: bold;
font-size: 18px; font-size: 18px;
padding: 13px 22px; padding: 13px 22px;
padding-left: 24px + 40; // padding-left: 24px + 40;
margin-right: 10px; margin-right: 10px;
.border-radius(6px); .border-radius(8px);
position: relative; // position: relative;
text-align: left; text-align: left;
i { // i {
position: absolute; // position: absolute;
top: 8px; // top: 8px;
left: 15px; // left: 15px;
font-size: 46px; // font-size: 46px;
} // }
&.btn-github { // &.btn-github {
padding-left: 24px + 42; // padding-left: 24px + 42;
// }
}
} }
.hero-content { .hero-content {
width: 650px; // width: 620px;
text-align: center; text-align: center;
} }
} }
@ -130,20 +146,26 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
} }
} }
section {
padding-top: 40px;
}
#social-buttons { #social-buttons {
margin-bottom: 30px; padding: 22px 0;
text-align: center; text-align: center;
background-color: #f5f5f5;
border-top: 1px solid #fff;
border-bottom: 1px solid #ddd;
.btn { .btn {
font-family: @serifFontFamily; // font-family: @serifFontFamily;
font-weight: bold; font-weight: bold;
font-size: @baseFontSize; // font-size: @baseFontSize;
padding: 4px 10px 1px; padding: 0px 5px;
line-height: @baseLineHeight; line-height: @baseLineHeight - 3;
} }
.count.btn { .count.btn {
font-family: @sansFontFamily; background: @white;
font-weight: normal; font-weight: normal;
.buttonBackground(@white, @white);
} }
.watch, .fork { .watch, .fork {
margin-right: 30px; margin-right: 30px;
@ -153,7 +175,7 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
.the-icons { .the-icons {
list-style-type: none; list-style-type: none;
margin-left: 0; margin: 0;
li { li {
cursor: pointer; cursor: pointer;
line-height: 32px; line-height: 32px;
@ -169,7 +191,10 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
} }
&:hover { &:hover {
background-color: lighten(@errorBackground, 6%); background-color: lighten(@errorBackground, 6%);
[class^="icon-"], [class*=" icon-"] { *font-size: 28px; *vertical-align: middle; } [class^="icon-"], [class*=" icon-"] {
*font-size: 28px;
*vertical-align: middle;
}
[class^="icon-"]:before, [class^="icon-"]:before,
[class*=" icon-"]:before { [class*=" icon-"]:before {
@ -180,11 +205,6 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
} }
} }
#all-icons, #new-icons {
h3 {
margin-top: 10px;
}
}
#why { #why {
.row { .row {
@ -192,8 +212,7 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
} }
.icon-large { .icon-large {
font-size: 22px; font-size: 22px;
text-align: center; padding-right: 5px;
padding-right: 4px;
} }
} }

View file

@ -27,7 +27,7 @@
@import "tables.less"; @import "tables.less";
// Components: common // Components: common
//@import "sprites.less"; @import "sprites.less";
@import "dropdowns.less"; @import "dropdowns.less";
@import "wells.less"; @import "wells.less";
@import "component-animations.less"; @import "component-animations.less";

View file

@ -29,6 +29,8 @@
@pink: #c3325f; @pink: #c3325f;
@purple: #7a43b6; @purple: #7a43b6;
@redDark: darken(@red, 10%);
// Scaffolding // Scaffolding
// ------------------------- // -------------------------

View file

@ -41,21 +41,33 @@
</head> </head>
<body> <body>
<!--for navigation-->
<div id="overview"></div>
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar navbar-inverse navbar-fixed-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="icon-flag"></i> Font Awesome</a>
<ul class="nav"> <ul class="nav">
<li><a href="#overview">Overview</a></li> <li><a href="#whats-new">What's New</a></li>
<li><a href="#new-icons">New Icons</a></li> <li class="dropdown">
<li><a href="#all-icons">All Icons</a></li> <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Icons
<i class="icon-caret-down"></i>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#icons-new">New Icons</a></li>
<li class="divider"></li>
<li class="nav-header">All Icons</li>
<li><a href="#icons-web-app">Web Application</a></li>
<li><a href="#icons-text-editor">Text Editor</a></li>
<li><a href="#icons-directional">Directional</a></li>
<li><a href="#icons-video-player">Video Player</a></li>
<li><a href="#icons-social">Social</a></li>
<li><a href="#icons-medical">Medical</a></li>
</ul>
</li>
<li><a href="#examples">Examples</a></li> <li><a href="#examples">Examples</a></li>
<li><a href="#integration">Integration</a></li> <li><a href="#integration">Integration</a></li>
<li><a href="#code">Code</a></li> <li><a href="#code">Code</a></li>
<li><a href="#roadmap">Roadmap</a></li> <li><a href="#whats-next">What's Next</a></li>
</ul> </ul>
<ul class="nav pull-right"> <ul class="nav pull-right">
<li><a href="mailto:dave@davegandy.com"><i class="icon-envelope"></i> Me</a></li> <li><a href="mailto:dave@davegandy.com"><i class="icon-envelope"></i> Me</a></li>
@ -65,71 +77,82 @@
</div> </div>
<div class="hero-unit"> <div class="jumbotron">
<div class="container"> <div class="container">
<div id="iconCarousel" class="carousel slide"> <div class="row">
<!-- Carousel items --> <div class="span8">
<div class="carousel-inner"> <div class="hero-content">
<div class="active item"><div><i class="icon-flag"></i></div></div> <h1>Font Awesome</h1>
<div class="item"><div><i class="icon-magic"></i></div></div> <p>The iconic font designed for<br>use with Twitter Bootstrap</p>
<div class="item"><div><i class="icon-beaker"></i></div></div> <div class="actions">
<div class="item"><div><i class="icon-briefcase"></i></div></div> <a class="btn btn-primary btn-large" href="https://github.com/FortAwesome/Font-Awesome/zipball/master"
<div class="item"><div><i class="icon-bullhorn"></i></div></div> onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'Download on GitHub']);">
<div class="item"><div><i class="icon-umbrella"></i></div></div> <i class="icon-download icon-2x pull-left"></i>
<div class="item"><div><i class="icon-star-empty"></i></div></div> Download Font<br>Awesome 3.0</a>
<div class="item"><div><i class="icon-envelope"></i></div></div> <a class="btn btn-large btn-github" href="https://github.com/FortAwesome/Font-Awesome" target="_blank"
<div class="item"><div><i class="icon-leaf"></i></div></div> onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'View Project on GitHub']);">
<div class="item"><div><i class="icon-key"></i></div></div> <i class="icon-github icon-2x pull-left"></i>
<div class="item"><div><i class="icon-book"></i></div></div> View Project<br>on GitHub</a>
<div class="item"><div><i class="icon-tint"></i></div></div> </div>
<div class="item"><div><i class="icon-edit"></i></div></div> </div>
<div class="item"><div><i class="icon-search"></i></div></div>
<div class="item"><div><i class="icon-home"></i></div></div>
<div class="item"><div><i class="icon-picture"></i></div></div>
<div class="item"><div><i class="icon-headphones"></i></div></div>
<div class="item"><div><i class="icon-heart-empty"></i></div></div>
<div class="item"><div><i class="icon-thumbs-up"></i></div></div>
<div class="item"><div><i class="icon-flag"></i></div></div>
</div> </div>
<!-- Carousel nav --> <div class="span4">
<a class="carousel-control left" href="#iconCarousel" data-slide="prev" <div id="iconCarousel" class="carousel slide">
onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Prev']);"> <!-- Carousel items -->
<i class="icon-arrow-left"></i></a> <div class="carousel-inner">
<a class="carousel-control right" href="#iconCarousel" data-slide="next" <div class="item"><div><i class="icon-flag"></i></div></div>
onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Next']);"> <div class="item"><div><i class="icon-cloud-download"></i></div></div>
<i class="icon-arrow-right"></i></a> <div class="item"><div><i class="icon-lightbulb"></i></div></div>
</div> <div class="item"><div><i class="icon-user-md"></i></div></div>
<div class="hero-content"> <div class="active item"><div><i class="icon-group"></i></div></div>
<h1>Font Awesome</h1> <div class="item"><div><i class="icon-ambulance"></i></div></div>
<p>The iconic font designed for<br>use with Twitter Bootstrap</p> <div class="item"><div><i class="icon-star-empty"></i></div></div>
<div class="actions"> <div class="item"><div><i class="icon-envelope"></i></div></div>
<a class="btn btn-primary btn-large" href="https://github.com/FortAwesome/Font-Awesome/zipball/master" <div class="item"><div><i class="icon-coffee"></i></div></div>
onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'Download on GitHub']);"> <div class="item"><div><i class="icon-medkit"></i></div></div>
<i class="icon-download"></i>Download Font<br>Awesome v3.0</a> <div class="item"><div><i class="icon-book"></i></div></div>
<a class="btn btn-large btn-github" href="https://github.com/FortAwesome/Font-Awesome" target="_blank" <div class="item"><div><i class="icon-fighter-jet"></i></div></div>
onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'View Project on GitHub']);"> <div class="item"><div><i class="icon-edit"></i></div></div>
<i class="icon-github-sign"></i>View Project<br>on GitHub</a> <div class="item"><div><i class="icon-search"></i></div></div>
<div class="item"><div><i class="icon-beer"></i></div></div>
<div class="item"><div><i class="icon-stethoscope"></i></div></div>
<div class="item"><div><i class="icon-hospital"></i></div></div>
<div class="item"><div><i class="icon-heart-empty"></i></div></div>
<div class="item"><div><i class="icon-thumbs-up"></i></div></div>
<div class="item"><div><i class="icon-flag"></i></div></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#iconCarousel" data-slide="prev"
onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Prev']);">
<i class="icon-arrow-left"></i></a>
<a class="carousel-control right" href="#iconCarousel" data-slide="next"
onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Next']);">
<i class="icon-arrow-right"></i></a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="container">
<section id="social-buttons"> <section id="social-buttons">
<span class="watch"> <div class="container">
<a class="btn" href="https://github.com/FortAwesome/Font-Awesome" target="_blank"><i class="icon-github"></i> Watch</a> <span class="watch">
<a id="watchers" class="count btn" href="https://github.com/FortAwesome/Font-Awesome">3900+</a> <a class="btn btn-mini" href="https://github.com/FortAwesome/Font-Awesome" target="_blank"><i class="icon-github icon-large"></i> Watch</a>
</span> <a id="watchers" class="count btn btn-mini" href="https://github.com/FortAwesome/Font-Awesome">9000+</a>
<span class="fork"> </span>
<a class="btn" href="https://github.com/FortAwesome/Font-Awesome" target="_blank"><i class="icon-github"></i> Fork</a> <span class="fork">
<a id="forks" class="count btn" href="#">200+</a> <a class="btn btn-mini" href="https://github.com/FortAwesome/Font-Awesome" target="_blank"><i class="icon-github icon-large"></i> Fork</a>
</span> <a id="forks" class="count btn btn-mini" href="#">800+</a>
<span class="follow"> </span>
<a class="btn" href="http://twitter.com/fortaweso_me/" target="_blank"><i class="icon-twitter"></i> Follow @fortaweso_me</a> <span class="follow">
<span class="arrow-right"></span><span id="followers" class="count btn">1000+</span> <a class="btn btn-mini" href="http://twitter.com/fortaweso_me/" target="_blank"><i class="icon-twitter icon-large"></i> Follow @fortaweso_me</a>
</span> <span id="followers" class="count btn btn-mini">2500+</span>
</span>
</div>
</section> </section>
<div class="container">
<section id="why"> <section id="why">
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
@ -176,7 +199,7 @@
</section> </section>
<section id="whats-new"> <section id="whats-new">
<h1>What's new in Font Awesome 3.0</h1> <h2 class="page-header">What's new in Font Awesome 3.0</h2>
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<h4>LGPL Compliant</h4> <h4>LGPL Compliant</h4>
@ -188,15 +211,14 @@
</div> </div>
<div class="span4"> <div class="span4">
<h4>Font Sub-setting</h4> <h4>Font Sub-setting</h4>
Thanks to @someone, <a href="#">sub-setting</a> is now possible, so you get just the icons you need Thanks to <a target="_blank" href="https://twitter.com/grantgordon">@grantgordon</a> and <a target="_blank" href="https://twitter.com/johnsmclay">@johnsmclay</a>, <a href="#">sub-setting</a> is now possible, so you get just the icons you need.
</div> </div>
</div> </div>
</section> </section>
<section id="new-icons" class="row"> <section id="icons-new" class="row">
<div class="span12"> <div class="span12">
<h1>New Icons in 3.0</h1> <h2 class="page-header">New Icons in 3.0</h2>
<p>You asked, Font Awesome delivers with 70 shiny new icons in version 2.0. This giant set of new icons was requested on the Font Awesome GitHub project and includes icon parity with Bootstrap 2.0.3.</p> <p>You asked, Font Awesome delivers with 70 shiny new icons in version 2.0. This giant set of new icons was requested on the Font Awesome GitHub project and includes icon parity with Bootstrap 2.0.3.</p>
</div> </div>
@ -206,10 +228,8 @@
<li><i class="icon-exchange"></i> icon-exchange</li> <li><i class="icon-exchange"></i> icon-exchange</li>
<li><i class="icon-cloud-download"></i> icon-cloud-download</li> <li><i class="icon-cloud-download"></i> icon-cloud-download</li>
<li><i class="icon-cloud-upload"></i> icon-cloud-upload</li> <li><i class="icon-cloud-upload"></i> icon-cloud-upload</li>
<li><i class="icon-user-md"></i> icon-user-md</li> <li><i class="icon-user-md"></i> icon-user-md</li>
<li><i class="icon-stethescope"></i> icon-stethescope</li> <li><i class="icon-stethoscope"></i> icon-stethoscope</li>
<li><i class="icon-briefcase"></i> icon-briefcase</li> <li><i class="icon-briefcase"></i> icon-briefcase</li>
<li><i class="icon-bell-alt"></i> icon-bell-alt</li> <li><i class="icon-bell-alt"></i> icon-bell-alt</li>
<li><i class="icon-coffee"></i> icon-coffee</li> <li><i class="icon-coffee"></i> icon-coffee</li>
@ -220,19 +240,15 @@
<li><i class="icon-ambulance"></i> icon-ambulance</li> <li><i class="icon-ambulance"></i> icon-ambulance</li>
<li><i class="icon-medkit"></i> icon-medkit</li> <li><i class="icon-medkit"></i> icon-medkit</li>
<li><i class="icon-fighter-jet"></i> icon-figher-jet</li> <li><i class="icon-fighter-jet"></i> icon-figher-jet</li>
<li><i class="icon-beer"></i> icon-beer</li>
</ul> </ul>
</div> </div>
</section> </section>
<section id="all-icons" class="row"> <section id="icons-web-app" class="row">
<div class="span12"> <div class="span12">
<h1>All Icons by Category</h1> <h2 class="page-header">Web Application Icons</h2>
<!--<p>Inspired by the Glyphicon set that comes with <a href="http://twitter.github.com/bootstrap/" target="_blank">Twitter Bootstrap 2.0</a>, Font Awesome is designed from scratch for a full array of web-related actions.</p>-->
</div>
<div class="span12">
<h3>Web Application Icons</h3>
</div> </div>
<div class="span3"> <div class="span3">
<ul class="the-icons"> <ul class="the-icons">
@ -380,9 +396,11 @@
<li><i class="icon-zoom-out"></i> icon-zoom-out</li> <li><i class="icon-zoom-out"></i> icon-zoom-out</li>
</ul> </ul>
</div> </div>
</section>
<section id="icons-text-editor" class="row">
<div class="span12"> <div class="span12">
<h3>Text Editor Icons</h3> <h2 class="page-header">Text Editor Icons</h2>
</div> </div>
<div class="span3"> <div class="span3">
<ul class="the-icons"> <ul class="the-icons">
@ -431,9 +449,11 @@
<li><i class="icon-list-alt"></i> icon-list-alt</li> <li><i class="icon-list-alt"></i> icon-list-alt</li>
</ul> </ul>
</div> </div>
</section>
<section id="icons-directional" class="row">
<div class="span12"> <div class="span12">
<h3>Directional Icons</h3> <h2 class="page-header">Directional Icons</h2>
</div> </div>
<div class="span3"> <div class="span3">
<ul class="the-icons"> <ul class="the-icons">
@ -471,9 +491,11 @@
<li><i class="icon-chevron-up"></i> icon-chevron-up</li> <li><i class="icon-chevron-up"></i> icon-chevron-up</li>
</ul> </ul>
</div> </div>
</section>
<section id="icons-video-player" class="row">
<div class="span12"> <div class="span12">
<h3>Video Player Icons</h3> <h2 class="page-header">Video Player Icons</h2>
</div> </div>
<div class="span3"> <div class="span3">
<ul class="the-icons"> <ul class="the-icons">
@ -505,9 +527,11 @@
<li><i class="icon-resize-small"></i> icon-resize-small</li> <li><i class="icon-resize-small"></i> icon-resize-small</li>
</ul> </ul>
</div> </div>
</section>
<section id="icons-social" class="row">
<div class="span12"> <div class="span12">
<h3>Social Icons</h3> <h2 class="page-header">Social Icons</h2>
</div> </div>
<div class="span3"> <div class="span3">
<ul class="the-icons"> <ul class="the-icons">
@ -540,11 +564,39 @@
<li><i class="icon-sign-blank"></i> icon-sign-blank</li> <li><i class="icon-sign-blank"></i> icon-sign-blank</li>
</ul> </ul>
</div> </div>
</section>
<section id="icons-medical" class="row">
<div class="span12">
<h2 class="page-header">Medical Icons <small>Join me at Kyruus</small></h2>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-ambulance"></i> icon-ambulance</li>
<li><i class="icon-beaker"></i> icon-beaker</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-hospital"></i> icon-hospital</li>
<li><i class="icon-medkit"></i> icon-medkit</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-stethoscope"></i> icon-stethoscope</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-user-md"></i> icon-user-md</li>
</ul>
</div>
</section> </section>
<section id="examples"> <section id="examples">
<h1>Examples</h1> <h2 class="page-header">Examples</h2>
<p>Many examples re-used from the Twitter Bootstrap documentation.</p> <p>Many examples re-used from the Twitter Bootstrap documentation.</p>
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
@ -562,14 +614,14 @@
</div> </div>
<div class="span4"> <div class="span4">
<p> <p>
<a class="btn" href="#"><i class="icon-refresh"></i> Refresh</a> <a class="btn" href="#"><i class="icon-repeat"></i> Reload</a>
<a class="btn btn-success" href="#"><i class="icon-shopping-cart icon-large"></i> Checkout</a> <a class="btn btn-success" href="#"><i class="icon-shopping-cart icon-large"></i> Checkout</a>
<a class="btn btn-danger" href="#"><i class="icon-trash icon-large"></i> Delete</a> <a class="btn btn-danger" href="#"><i class="icon-trash icon-large"></i> Delete</a>
</p> </p>
<p> <p>
<a class="btn btn-large btn-primary" href="#"><i class="icon-comment"></i> Comment</a> <a class="btn btn-large btn-primary" href="#"><i class="icon-comment"></i> Comment</a>
<a class="btn btn-small" href="#"><i class="icon-cog"></i> Settings</a> <a class="btn btn-small" href="#"><i class="icon-cog"></i> Settings</a>
<a class="btn btn-small btn-info" href="#"><i class="icon-info-sign"></i> More Info</a> <a class="btn btn-small btn-info" href="#"><i class="icon-info-sign"></i> Info</a>
</p> </p>
<div class="well" style="padding: 8px 0;"> <div class="well" style="padding: 8px 0;">
<ul class="nav nav-list"> <ul class="nav nav-list">
@ -628,11 +680,11 @@
</section> </section>
<section id="integration"> <section id="integration">
<h1>Integration</h1> <h2 class="page-header">Integration</h2>
<p>It's easy to integrate Font Awesome into Twitter Bootstrap, or even use it on its own.</p> <p>It's easy to integrate Font Awesome into Twitter Bootstrap, or even use it on its own.</p>
<div class="row"> <div class="row">
<div class="span3"> <div class="span3">
<h3>Bootstrap using LESS</h3> <h4>Bootstrap using LESS</h4>
<p>Use this method if integrating with Twitter Bootstrap using LESS</p> <p>Use this method if integrating with Twitter Bootstrap using LESS</p>
</div> </div>
<div class="span9"> <div class="span9">
@ -662,12 +714,12 @@
</div> </div>
<div class="row"> <div class="row">
<div class="span3"> <div class="span3">
<h3>Bootstrap using CSS</h3> <h4>Bootstrap using CSS</h4>
<p>Use this method if integrating with Twitter Bootstrap using CSS.</p> <p>Use this method if integrating with Twitter Bootstrap using CSS.</p>
</div> </div>
<div class="span9"> <div class="span9">
<ol> <ol>
<li>Customize Twitter Bootstrap <a href="http://twitter.github.com/bootstrap/download.html" target="_blank">here</a>. Make sure to uncheck the default "Icons" under "Base CSS."</li> <li>Customize Twitter Bootstrap <a href="http://twitter.github.com/bootstrap/customize.html" target="_blank">here</a>. Make sure to uncheck the default "Icons" under "Base CSS."</li>
<li>Copy the Font Awesome font directory into your project.</li> <li>Copy the Font Awesome font directory into your project.</li>
<li>Copy font-awesome.css into your project.</li> <li>Copy font-awesome.css into your project.</li>
<li>Open your project's font-awesome.css and edit the font url to ensure it points to the right place (see above example).</li> <li>Open your project's font-awesome.css and edit the font url to ensure it points to the right place (see above example).</li>
@ -684,7 +736,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="span3"> <div class="span3">
<h3>Not using Bootstrap?</h3> <h4>Not using Bootstrap?</h4>
<p>Font Awesome works just as well without Twitter Bootstrap.</p> <p>Font Awesome works just as well without Twitter Bootstrap.</p>
</div> </div>
<div class="span9"> <div class="span9">
@ -699,32 +751,32 @@
</section> </section>
<section id="code"> <section id="code">
<h1>Code</h1> <h2 class="page-header">Code</h2>
<div class="row"> <div class="row">
<div class="span3"> <div class="span3">
<h3>Inline Icon</h3> <h4>Inline Icon</h4>
<p>Place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag.</p> <p>Place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag.</p>
</div> </div>
<div class="span9"> <div class="span9">
<div class="well"> <div class="well">
<div style="font-size: 24px;"> <div style="font-size: 24px; line-height: 1.5em;">
<i class="icon-camera-retro"></i> icon-camera-retro <i class="icon-camera-retro"></i> icon-camera-retro
</div> </div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div style="font-size: 24px;"&gt; &lt;div style="font-size: 24px; line-height: 1.5em;"&gt;
&lt;i class="icon-camera-retro"&gt;&lt;/i&gt; icon-camera-retro &lt;i class="icon-camera-retro"&gt;&lt;/i&gt; icon-camera-retro
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<div class="alert alert-info"><i class="icon-info-sign"></i> Icon classes are echoed via CSS :before.</div> <div class="alert alert-info"><i class="icon-info-sign"></i> Icon classes are echoed via CSS :before.</div>
<p>Increase the icon size by using the <code>icon-large</code> class. This increases the size by 33% relative to the font-size of the container.</p> <p>Increase the icon size by using the <code>icon-large</code> class. This increases the size by 33% relative to the font-size of the container.</p>
<div class="well"> <div class="well">
<div style="font-size: 24px;"> <div style="font-size: 24px; line-height: 1.5em;">
<i class="icon-camera-retro icon-large"></i> icon-camera-retro <i class="icon-camera-retro icon-large"></i> icon-camera-retro
</div> </div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div style="font-size: 24px;"&gt; &lt;div style="font-size: 24px; line-height: 1.5em;"&gt;
&lt;i class="icon-camera-retro icon-large"&gt;&lt;/i&gt; icon-camera-retro &lt;i class="icon-camera-retro icon-large"&gt;&lt;/i&gt; icon-camera-retro
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
@ -732,49 +784,47 @@
</div> </div>
<div class="row"> <div class="row">
<div class="span3"> <div class="span3">
<h3>Buttons</h3> <h4>Buttons</h4>
<p>
<p> <p>
<a class="btn" href="#"> <a class="btn" href="#">
<i class="icon-refresh"></i> Refresh</a> <i class="icon-repeat"></i> Reload</a>
<a class="btn btn-success" href="#"> <a class="btn btn-success" href="#">
<i class="icon-shopping-cart icon-large"></i> Checkout</a> <i class="icon-shopping-cart icon-large"></i> Checkout</a>
</p> </p>
<p> <p>
<a class="btn btn-large btn-primary" href="#"> <a class="btn btn-large btn-primary" href="#">
<i class="icon-comment"></i> Comment</a> <i class="icon-comment"></i> Comment</a>
<a class="btn btn-danger" href="#"> <a class="btn btn-small btn-info" href="#">
<i class="icon-trash icon-large"></i> Delete</a> <i class="icon-info-sign"></i> Info</a>
</p> </p>
<p> <p>
<a class="btn btn-danger" href="#">
<i class="icon-trash icon-large"></i> Delete</a>
<a class="btn btn-small" href="#"> <a class="btn btn-small" href="#">
<i class="icon-cog"></i> Settings</a> <i class="icon-cog"></i> Settings</a>
<a class="btn btn-small btn-info" href="#">
<i class="icon-info-sign"></i> More Info</a>
</p>
</p> </p>
</div> </div>
<div class="span9"> <div class="span9">
<p>Font Awesome icons work great in buttons.</p> <p>Font Awesome icons work great in buttons.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;a class="btn" href="#"&gt; &lt;a class="btn" href="#"&gt;
&lt;i class="icon-refresh"&gt;&lt;/i&gt; Refresh&lt;/a&gt; &lt;i class="icon-repeat"&gt;&lt;/i&gt; Reload&lt;/a&gt;
&lt;a class="btn btn-success" href="#"&gt; &lt;a class="btn btn-success" href="#"&gt;
&lt;i class="icon-shopping-cart icon-large"&gt;&lt;/i&gt; Checkout&lt;/a&gt; &lt;i class="icon-shopping-cart icon-large"&gt;&lt;/i&gt; Checkout&lt;/a&gt;
&lt;a class="btn btn-large btn-primary" href="#"&gt; &lt;a class="btn btn-large btn-primary" href="#"&gt;
&lt;i class="icon-comment"&gt;&lt;/i&gt; Comment&lt;/a&gt; &lt;i class="icon-comment"&gt;&lt;/i&gt; Comment&lt;/a&gt;
&lt;a class="btn btn-small btn-info" href="#"&gt;
&lt;i class="icon-info-sign"&gt;&lt;/i&gt; Info&lt;/a&gt;
&lt;a class="btn btn-danger" href="#"&gt; &lt;a class="btn btn-danger" href="#"&gt;
&lt;i class="icon-trash icon-large"&gt;&lt;/i&gt; Delete&lt;/a&gt; &lt;i class="icon-trash icon-large"&gt;&lt;/i&gt; Delete&lt;/a&gt;
&lt;a class="btn btn-small" href="#"&gt; &lt;a class="btn btn-small" href="#"&gt;
&lt;i class="icon-cog"&gt;&lt;/i&gt; Settings&lt;/a&gt; &lt;i class="icon-cog"&gt;&lt;/i&gt; Settings&lt;/a&gt;
&lt;a class="btn btn-small btn-info" href="#"&gt;
&lt;i class="icon-info-sign"&gt;&lt;/i&gt; More Info&lt;/a&gt;
</pre> </pre>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="span3"> <div class="span3">
<h3>Button groups</h3> <h4>Button groups</h4>
<p> <p>
<div class="btn-group"> <div class="btn-group">
<a class="btn" href="#"><i class="icon-align-left"></i></a> <a class="btn" href="#"><i class="icon-align-left"></i></a>
@ -797,7 +847,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="span3"> <div class="span3">
<h3>Button dropdowns</h3> <h4>Button dropdowns</h4>
<p> <p>
<div class="btn-group"> <div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-user"></i> User</a> <a class="btn btn-primary" href="#"><i class="icon-user"></i> User</a>
@ -832,7 +882,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="span3"> <div class="span3">
<h3>Lists</h3> <h4>Lists</h4>
<p> <p>
<ul class="icons"> <ul class="icons">
<li><i class="icon-ok"></i> Lists</li> <li><i class="icon-ok"></i> Lists</li>
@ -858,7 +908,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="span3"> <div class="span3">
<h3>Navigation</h3> <h4>Navigation</h4>
<div class="well" style="padding: 8px 0;"> <div class="well" style="padding: 8px 0;">
<ul class="nav nav-list"> <ul class="nav nav-list">
<li class="active"><a href="#"><i class="icon-home"></i> Home</a></li> <li class="active"><a href="#"><i class="icon-home"></i> Home</a></li>
@ -882,7 +932,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="span3"> <div class="span3">
<h3>Prepended form inputs</h3> <h4>Prepended form inputs</h4>
<p> <p>
<form> <form>
<div class="input-prepend"> <div class="input-prepend">
@ -913,39 +963,57 @@
</div> </div>
<div class="row"> <div class="row">
<div class="span3"> <div class="span3">
<h3>Custom CSS</h3> <h4>Custom CSS</h4>
<p>Anything you can do with CSS font effects, you can do with Font Awesome.</p> <p>Anything you can do with CSS font effects, you can do with Font Awesome.</p>
</div> </div>
<div class="span9"> <div class="span9">
<p>Star Ratings (inspired by <a href="http://css-tricks.com/star-ratings/" target="_blank">CSS Tricks</a>)</p> <p>Star Ratings (inspired by <a href="http://css-tricks.com/star-ratings/" target="_blank">CSS Tricks</a>)</p>
<div class="well"> <div class="well">
<span class="rating"> <span class="rating">
<span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span> <span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section id="roadmap"> <section id="whats-next">
<h1>Roadmap</h1> <h2 class="page-header">What's next</h2>
<p>Here's the plan for future updates.</p> <p>Here's the plan for future updates.</p>
<ul class="icons"> <ul class="icons">
<li><i class="icon-plus"></i> Font sub-setting. Keep your font file sizes small by only using the icons you need.</li> <li><i class="icon-plus"></i> Font sub-setting. Keep your font file sizes small by only using the icons you need.</li>
<li><i class="icon-plus"></i> Better hinting for smaller font sizes.</li> <li><i class="icon-plus"></i> Better hinting for smaller font sizes.</li>
<li><i class="icon-plus"></i> More icons. Have any requests? <a href="https://github.com/FortAwesome/Font-Awesome/issues" target="_blank">Open an issue</a> in the Font Awesome GitHub project.</li> <li><i class="icon-plus"></i> More icons. Have any requests? <a href="https://github.com/FortAwesome/Font-Awesome/issues" target="_blank">Open an issue</a> in the Font Awesome GitHub project.</li>
<li><i class="icon-plus"></i> More complete Twitter Bootstrap compatibility.</li>
<li><i class="icon-plus"></i> Tricks and tips for super-awesome creative CSS methods, like the star example above.</li> <li><i class="icon-plus"></i> Tricks and tips for super-awesome creative CSS methods, like the star example above.</li>
</ul> </ul>
</section> </section>
<section id="fort-awesome">
<h2 class="page-header">Fort Awesome? Font Awesome?</h2>
<div class="row">
<div class="span8">
<div class="lead">
<p><strong>Fort Awesome</strong> is a magical place. A place of wonder and... magic. It's just like Xanadu, but without that dorky name.</p>
<p>So magical, in fact, that <strong>Font Awesome</strong> was forged from its depths. Who can tell what may happen next...</p>
</div>
<small>Fort Awesome is the organization, Font Awesome is the project. It's not a spelling error.</small>
</div>
<div class="span4">
<div>
<img class="img-rounded" src="assets/img/fort_awesome.jpg">
</div>
<div class="caption text-align-right">Harvard Yard, 2005. &copy; DG.</div>
</div>
</div>
</section>
<footer> <footer>
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<h2>Contact</h2> <h2>Contact</h2>
<ul class="icons"> <ul class="icons">
<li><i class="icon-envelope"></i> Email: <a href="mailto:dave@davegandy.com">Dave Gandy</a></li> <li><i class="icon-envelope"></i> Email: <a href="mailto:dave@davegandy.com">Dave Gandy</a></li>
<li><i class="icon-twitter"></i> Twitter: <a href="http://twitter.com/fortaweso_me/" target="_blank">@FortAweso_me</a></li> <li><i class="icon-twitter"></i> Twitter: <a href="https://twitter.com/fortaweso_me/" target="_blank">@FortAweso_me</a></li>
<li><i class="icon-wrench"></i> Work: Lead Product Designer @ <a href="http://kyruus.com" target="_blank">Kyruus</a></li> <li><i class="icon-wrench"></i> Work: Lead Product Designer @ <a href="http://kyruus.com" target="_blank">Kyruus</a></li>
</ul> </ul>
</div> </div>
@ -961,8 +1029,8 @@
</div> </div>
<div> <div>
<h2>Special Thanks</h2> <h2>Special Thanks</h2>
Special thanks to <a href="http://twitter.com/robmadole/" target="_blank">@robmadole</a> and Special thanks to <a href="https://twitter.com/robmadole/" target="_blank">@robmadole</a> and
<a href="http://twitter.com/supercodepoet/" target="_blank">@supercodepoet</a> for icon design <a href="https://twitter.com/supercodepoet/" target="_blank">@supercodepoet</a> for icon design
review, advice, and some backbone.js help. review, advice, and some backbone.js help.
</div> </div>
</footer> </footer>
@ -974,7 +1042,7 @@
<div class="modal hide fade in"> <div class="modal hide fade in">
<div class="modal-header"> <div class="modal-header">
<a class="close" data-dismiss="modal"><i class="icon-remove"></i></a> <a class="close" data-dismiss="modal"><i class="icon-remove"></i></a>
<h3><%= iconName %></h3> <h4><%= iconName %></h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="row"> <div class="row">
@ -1025,18 +1093,7 @@
<script src="assets/js/underscore.min.js"></script> <script src="assets/js/underscore.min.js"></script>
<script src="assets/js/backbone.min.js"></script> <script src="assets/js/backbone.min.js"></script>
<script src="assets/js/prettify.min.js"></script> <script src="assets/js/prettify.min.js"></script>
<script src="assets/js/tw-bs-201/bootstrap-transition.js"></script> <script src="assets/js/bootstrap-222.min.js"></script>
<script src="assets/js/tw-bs-201/bootstrap-alert.js"></script>
<script src="assets/js/tw-bs-201/bootstrap-modal.js"></script>
<script src="assets/js/tw-bs-201/bootstrap-dropdown.js"></script>
<script src="assets/js/tw-bs-201/bootstrap-scrollspy.js"></script>
<script src="assets/js/tw-bs-201/bootstrap-tab.js"></script>
<script src="assets/js/tw-bs-201/bootstrap-tooltip.js"></script>
<script src="assets/js/tw-bs-201/bootstrap-popover.js"></script>
<script src="assets/js/tw-bs-201/bootstrap-button.js"></script>
<script src="assets/js/tw-bs-201/bootstrap-collapse.js"></script>
<script src="assets/js/tw-bs-201/bootstrap-carousel.js"></script>
<script src="assets/js/tw-bs-201/bootstrap-typeahead.js"></script>
<script src="assets/js/index/index.js"></script> <script src="assets/js/index/index.js"></script>
</body> </body>

View file

@ -0,0 +1,261 @@
<!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"> <!--<![endif]-->
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8" />
<title>Font Awesome Tests</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width; 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="assets/css/site.css">
<link rel="stylesheet" href="assets/css/prettify.css">
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.css">
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
</head>
<body>
<div class="container">
<h1>Visual tests</h1>
<h3>Icons <small>Icons should not be clipped</small></h3>
<div class="row">
<div class="span3">
<div class="well">
<i class="icon-building"></i> Building
</div>
</div>
<div class="span3">
<div class="well">
<i class="icon-building icon-large"></i> Building Large
</div>
</div>
<div class="span3">
<i class="icon-building"></i> Building
</div>
<div class="span3">
<i class="icon-building icon-large"></i> Building Large
</div>
</div>
<div class="row" style="font-size: 24px; line-height: 1.5em;">
<div class="span4">
<div class="well">
<i class="icon-building"></i> Building
</div>
</div>
<div class="span4">
<div class="well">
<i class="icon-building icon-large"></i> Building Large
</div>
</div>
<div class="span4">
<i class="icon-building icon-large"></i> Building Large
</div>
</div>
<h3>Links with Icons <small>icon should activate link</small></h3>
<div class="lead">
<a href="#"><i class="icon-building"></i> Link Here</a>
<a href="#"><i class="icon-building icon-large"></i> Link Here</a>
</div>
<h3>Navbar <small>should stay same height </small></h3>
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#"><i class="icon-flag"></i> Font Awesome</a>
<ul class="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
<i class="icon-caret-down"></i>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="icon-building"></i> Menu Item 1</a></li>
<li><a href="#"><i class="icon-building icon-large"></i> Menu Item 2</a></li>
</ul>
</li>
<li style="border: solid 1px white;"><a href="#examples"><i class="icon-building icon-large"></i> Nav Item 3</a></li>
</ul>
</div>
</div>
</div>
<h3>Plain buttons next to icon buttons <small>should be same height</small></h3>
<div class="row">
<div class="span4">
<div style="border: solid 1px #d3d3d3; text-align: center;">
<div>
<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="icon-building"></i></button>
</div>
<div>
<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="icon-building"></i></button>
</div>
<div>
<button class="btn">Button</button>
<button class="btn"><i class="icon-building"></i> Button</button>
<button class="btn"><i class="icon-building"></i></button>
</div>
<div>
<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="icon-building"></i></button>
</div>
</div>
</div>
<div class="span4">
<div style="border: solid 1px #d3d3d3; text-align: center;">
<div>
<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="icon-building icon-large"></i></button>
</div>
<div>
<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="icon-building icon-large"></i></button>
</div>
<div>
<button class="btn">Button</button>
<button class="btn"><i class="icon-building icon-large"></i> Button</button>
<button class="btn"><i class="icon-building icon-large"></i></button>
</div>
<div>
<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="icon-building icon-large"></i></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="span4">
<div style="border: solid 1px #d3d3d3;">
<a class="btn btn-large" href="#">
<i class="icon-building icon-2x pull-left"></i>
Longer<br>Button</a>
<a class="btn btn-large" href="#">
Longer<br>Button</a>
</div>
</div>
<div class="span4">
<div style="border: solid 1px #d3d3d3;">
<a class="btn" href="#">
<i class="icon-building icon-2x pull-left"></i>
Longer<br>Button</a>
<a class="btn" href="#">
Longer<br>Button</a>
</div>
</div>
<div class="span4">
<div style="border: solid 1px #d3d3d3;">
<a class="btn btn-small" href="#">
<i class="icon-building icon-2x pull-left"></i>
Longer<br>Button</a>
<a class="btn btn-small" href="#">
Longer<br>Button</a>
</div>
</div>
</div>
<h3>Nav pills & nav tabs <small>should be same height</small></h3>
<div class="row">
<span class="span6">
<ul class="nav nav-pills">
<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
<i class="icon-caret-down"></i>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="icon-building"></i> Menu Item 1</a></li>
<li><a href="#"><i class="icon-building icon-large"></i> Menu Item 2</a></li>
</ul>
</li>
<li class="active"><a href="#examples"><i class="icon-building icon-large"></i> Nav Item 3</a></li>
</ul>
</span>
<span class="span6">
<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
<i class="icon-caret-down"></i>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="icon-building"></i> Menu Item 1</a></li>
<li><a href="#"><i class="icon-building icon-large"></i> Menu Item 2</a></li>
</ul>
</li>
<li class="active"><a href="#examples"><i class="icon-building icon-large"></i> Nav Item 3</a></li>
</ul>
</span>
</div>
<h3>2x, 3x, 4x icons in text <small>should have margins next to and below text</small></h3>
<div class="row">
<div class="span6">
<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="span6">
<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="span4">
<i class="icon-building 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="span4">
<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="span4">
<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>
</div>
<script src="assets/js/jquery-1.7.1.min.js"></script>
<script src="assets/js/bootstrap-222.min.js"></script>
</body>
</html>