2013-03-10 1 views
0

나는 webapp 용으로 Font Awesome을 사용하려고하는데, IE7을 제외하고는 모두 잘 작동합니다. 불행하게도 저는 IE7을 지원해야합니다 : (IE7에서 awesome

내가 상속 한 레거시 응용 프로그램 중 일부이며 고객이 부트 스트랩과 함께 제공되는 아이콘/글리프를 변경하지 못하도록하는 것입니다. .. 이것이 내가 무슨 짓도록 부트 스트랩 glyps보다 단지 약간 다릅니다 최고 아이콘 그림 고객 가서 내가 어떤 방법으로 전문가는 생각하지

를 발견 (내가 생각 그것은 '해야'일) :

I 글꼴 굉장에서 CSS를 가져 와서 'icon-'을 'fa-icon-'로 변경하면 모든 CSS가 'fa-icon-'으로 바뀝니다. 즉, 앱에서 부트 스트랩과 함께 제공되는 글리프를 사용하지 않아도 그 클래스가 모두 '아이콘' . 그리고 모든 글꼴 굉장 내 앱의 아이콘은 'fa-icon-'클래스입니다.

제 문제는 IE7 호환성까지 뭔가를 망쳐 놓았어야한다는 것입니다. 나는 브라우저가 IE7 일 때 두 번 폰트가 굉장하다 - 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를 보려면 사이트 URL을 알려주시겠습니까? 나는 IE7도 지원해야한다. ..이 얼마나 고통스러운! –

+0

죄송합니다. 공개 URL을 사용하지 마십시오. – lostintranslation

+0

문제 없습니다, 드디어 받았습니다! 그나저나 게시물에 감사드립니다. –

답변

1

이 보이는 즉 파일이 적습니다. CSS 파일에 font-awesome-ie7.less를 컴파일 한 다음 훌륭한 것들을 포함 시켰습니다.