2013-02-04 2 views
1

사용 가능한 최신 버전을 사용 중입니다. 그러나 아이콘은 여전히 ​​IE9에서 내 앱에 상자로 표시됩니다 (참고 : IE8에서는 잘 작동합니다). fontawesome 페이지를 열면 아이콘이 정상적으로 나타납니다.Fontawesome IE9 및 Chrome에서 아이콘이 작동하지 않습니다.

이 제가 개발자 도구의 콘솔에서 얻을 :

CSS3117 : 글꼴 얼굴 출처 간 요청을 실패 @. 리소스 액세스가 제한됩니다. fontawesome-webfont.eot? #iefix & v = 3.0.1 CSS3117 : @ font-face가 원본 교차 요청에 실패했습니다. 리소스 액세스가 제한됩니다. fontawesome-webfont.woff? v = 3.0.1 CSS3117 : @ font-face가 원본 교차 요청에 실패했습니다. 리소스 액세스가 제한됩니다. fontawesome-webfont.ttf? v = 3.0.1

Firefox에서도 작동하지 않습니다. Chrome 및 IE8에서만 작동합니다.

문제의 원인에 대한 도움이 필요 하신가요 ??

답변

0

콘솔과 마찬가지로 : 원본 교차 글꼴로드를 수행하고 서버에서 올바른 헤더를 보내지 않도록합니다. 이에 대한 사양은 http://dev.w3.org/csswg/css3-fonts/#same-origin-restriction을 참조하십시오 (Chrome과 IE는 따르지 않음).

+0

나는 그것이 작동하도록하기 위해 무엇을 해야할지 아직 모르겠다. 제공된 솔루션이 이미 처리되었습니다. fontawesome이 정의 된 방식입니다 : @ font-face { font-family : 'FontAwesome'; src : url ('font/fontawesome-webfont.eot? v = 3.0.1'); URL : 'font/fontawesome-webfont.woff? v = 3.0.1'src : url ('font/fontawesome-webfont.eot? iefix & v = 3.0.1') 형식 ('embedded-opentype'), format ('woff'), url ('font/fontawesome-webfont.ttf? v = 3.0.1') 형식 ('truetype'); font-weight : normal; font-style : normal} –

+0

그래도 링크는 스타일 시트와 관련이 있습니다. 웹 페이지와 동일한 호스트 이름에서 스타일 시트를로드하고 있습니까? –

+0

아니요, 내 스타일 시트는 AmazonS3에서로드되는 반면 html 템플릿은 heroku에서로드됩니다. –

0

광산이 htaccess에 의해 차단되었습니다.

내 .htaccess에이 파일이있어 확장 프로그램을 추가해야했습니다.

# Do not process images or CSS files further 
RewriteRule \.(css|jpe?g|gif|png|js|ico|mp3|ogg|eot|svg|ttf|woff)$ - [L] 
관련 문제