FortAwesome/Font-Awesome — Issue #38: IE 7 support for icons in bootstrap
Author: pagameba
Created: 2012-03-07 20:36:16+00:00
State: open

While @font-face is technically supported in older versions of IE, the use of the :before selector is not supported and so setting icons in buttons for bootstrap using the default technique (relying on :before and content) does not work. After considerable research, the simplest solution we found was to create an ie7 specific css file using an expression. We did not test in versions prior to IE 7 but theoretically it should work for at least some of them. I used a regex in my text editor to modify the icon list and then added a couple of required css classes to fix things up.

Here is how it works:

font-awesome-ie7.css contents:

[class^="icon-"],
[class*=" icon-"] {
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
}

.icon-large {
font-size: 1.3333em;
}

.icon-glass { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = ' '); }
.icon-music { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = ' '); }
.icon-search { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = ' '); }
.icon-envelope { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = ' '); }
.icon-heart { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = ' '); }
.icon-star { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = ' '); }
.icon-star-empty { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = ' '); }
.icon-user { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = ' '); }
.icon-film { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = ' '); }
.icon-th-large { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = ' '); }
.icon-th { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = ' '); }
.icon-th-list { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = ' '); }
.icon-ok { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = ' '); }
.icon-remove { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = ' '); }
.icon-zoom-in { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = ' '); }

.icon-zoom-out { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = ' '); }
.icon-off { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = ' '); }
.icon-signal { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = ' '); }
.icon-cog { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = ' '); }
.icon-trash { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = ' '); }
.icon-home { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = ' '); }
.icon-file { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = ' '); }
.icon-time { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = ' '); }
.icon-road { *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-upload { *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-repeat { *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-lock { *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-volume-off { *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-qrcode { *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-tags { *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-print { *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-bold { *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-text-width { *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-align-right { *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-indent-left { *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-picture { *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-adjust { *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 = ' '); }