2013-03-10 119 views
0

我想为我的webapp使用字体真棒,除IE7以外的所有工作都很好。不幸的是,我必须支持IE7 :(在IE7中的字体真棒

更糟糕的是,它有点遗留下来的应用程序,并且客户不希望随bootstrap一起更改图标/字形。 。真棒图标只是比引导glyps略有不同转到数字顾客注意到

我以任何方式没有专家,所以这是我做的(我认为这是应该的工作):

我从Font Awesome取得了css,并将所有css都改成了'icon-'为'fa-icon-'。这意味着在我的应用程序中,我并没有改变使用bootstrap附带的字形,因为这些类都是'icon-' 。和所有的字体真棒我的应用程序中的图标属于类“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(''); } 

字体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"; } 
+0

非常好,我做了同样的事情,没有少用。你能否给你的网站网址看看你的最终CSS?我也必须支持IE7 ......真是太痛苦了! – 2014-04-24 08:00:15

+0

对不起没有公开的URL。 – lostintranslation 2014-04-24 12:12:24

+0

没问题,我终于明白了!感谢您的帖子顺便说一下。 – 2014-04-24 12:50:49

回答

1

看起来像我的新手的错误是不带编译即少文件。一旦我将font-awesome-ie7.less编译为一个css文件,然后将其包含在内,这些工作非常棒。