0

我正在尝试将 Font Awesome 用于我的 web 应用程序,并且除了 IE7 之外一切正常。不幸的是我必须支持 IE7 :(

更糟糕的是,它有点像我继承的遗留应用程序,客户不希望引导程序附带的图标/字形改变。是的,有一些 Font Awesome 图标与 bootstrap glyps 略有不同。去弄清楚客户注意到了。

我无论如何都不是专家,所以这就是我所做的(我认为它“应该”起作用):

我从 Font Awesome 中获取了 css,并将所有带有 'icon-' 的 css 更改为 'fa-icon-'。这意味着在我的应用程序中,我没有改变使用引导程序附带的字形,因为这些类都是“图标-”。我的应用程序中的所有 Font Awesome 图标都属于“fa-icon-”类。

我的问题是,就 IE7 的兼容性而言,我一定搞砸了。当浏览器为 IE7 时,我在标题中正确包含 font-awesome-ie7.min.css,请仔细检查。

问题是当我转到 IE7 时,我根本看不到图标。

这是我修改后的css的一些片段。欢迎任何和所有想法;)

字体真棒ie7.min.css

[class^="fa-icon"],[class*=" fa-icon"]{font-family: FontAwesome;font-style: normal;font-weight: normal;}
.btn.dropdown-toggle [class^="fa-icon"], .btn.dropdown-toggle [class*=" fa-icon"]{line-height: 1.4em;}
.fa-icon-large{font-size: 1.3333em;}
.ie7icon(@inner){*zoom: ~"expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '@{inner} ')";}

.fa-icon-glass                { .ie7icon(''); }
.fa-icon-music                { .ie7icon(''); }
.fa-icon-search               { .ie7icon(''); }
.fa-icon-envelope             { .ie7icon(''); }

font-awesome.min.css

@font-face{font-family: 'FontAwesome';src: url('../font/fontawesome-webfont.eot');src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),url('../font/fontawesome-webfont.woff') format('woff'),url('../font/fontawesome-webfont.ttf') format('truetype'),url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');font-weight: normal;font-style: normal;}
[class^="fa-icon-"]:before,[class*=" fa-icon-"]:before {font-family: FontAwesome;font-weight: normal;font-style: normal;display: inline-block;text-decoration: inherit;}
a[class^="fa-icon-"],a[class*=" fa-icon-"]{display: inline-block;text-decoration: inherit;}
.fa-icon-large:before{vertical-align: middle;font-size: 4/3em;}
.btn,.nav-tabs{[class^="fa-icon-"],[class*=" fa-icon-"]{line-height: .9em;}}
li{[class^="fa-icon-"],[class*=" fa-icon-"]{display: inline-block;width: 1.25em;text-align: center;}.fa-icon-large:before,.fa-icon-large:before {width: 1.5*1.25em;}}
ul.icons{list-style-type: none;margin-left: 2em;text-indent: -.8em;li {[class^="fa-icon-"],[class*=" fa-icon-"] {width: .8em;}.fa-icon-large:before,.fa-icon-large:before {vertical-align: initial;}}}

.fa-icon-glass:before                { content: "\f000"; }
.fa-icon-music:before                { content: "\f001"; }
.fa-icon-search:before               { content: "\f002"; }
.fa-icon-envelope:before             { content: "\f003"; }
.fa-icon-heart:before                { content: "\f004"; }
.fa-icon-star:before                 { content: "\f005"; }
4

1 回答 1

1

看起来我的菜鸟错误是没有编译 ie less 文件。一旦我将 font-awesome-ie7.less 编译成一个 css 文件,然后将其包含在内,效果就很好。

于 2013-03-11T13:13:57.107 回答