font-awesome이 localhost에서는 작동하지만 웹에서는 작동하지 않는 이유는 무엇입니까?

font-awesome이 localhost에서는 작동하지만 웹에서는 작동하지 않는 이유는 무엇입니까?

---

내 프로젝트에서 멋진 글꼴을 사용하고 (mvc/asp.net)있습니다. 내 문제는 프로젝트를 디버깅하고 확인 localhost하고 글꼴 멋진 아이콘에 문제가 없다는 것입니다. 그러나 웹 사이트를 게시하고 웹에서 확인했을 때 아이콘 대신 작은 상자가 보였습니다. 나는 그것이 올바른 디렉토리 ( css파일이 있는 곳)에 위치한다고 확신합니다 .

적절한 해결책을 찾지 못했습니다.

덧붙여서 버튼에도 문제가 없습니다. 모두 괜찮지 만 아이콘이 사라졌습니다.

감사

---

방금 웹 페이지를로드하고 방화범의 넷 탭을 확인했습니다.

다음 URL에서 404를 반환했습니다.

http://www.senocakonline.com/Content/font/fontawesome-webfont.woff

http://www.senocakonline.com/Content/font/fontawesome-webfont.ttf

누락 된 것이 아이콘이 표시되지 않는 이유라고 생각합니다.

업데이트 : 23.10.2015 사용 가능하게하려면 다음 코드를 WebConfig에 추가하면됩니다.

<system.webServer>
    <staticContent>
      <mimeMap fileExtension="woff" mimeType="application/font-woff" />
      <mimeMap fileExtension="woff2" mimeType="application/font-woff" />
    </staticContent>
</system.webServer>

---

font-awesome이 디버그 모드에서는 작동하지만 IIS에서는 작동하지 않는 이유는 무엇입니까?

Visual Studio에서는 기본적으로 게시 중에 일부 글꼴 파일이 포함되지 않습니다.

• .eot
• .json
• .ttf
• .woff

이는 빌드 작업 이 None 으로 설정되어 있기 때문입니다. 이것은 기본적으로 MVC에서, WebForms에서는 확실하지 않습니다. 영향을받는 파일의 속성으로 이동하여 "없음"에서 "내용"으로 설정해야합니다.

이것이 내가 그것을 해결 한 방법입니다 (일부는 제안 할 수 있듯이 파일을 수동으로 드래그하는 것이 아님)

크레딧은이 사람에게갑니다 : http://edsykes.blogspot.com/2012/09/aspnet-build-actions-with-ttf-eot-and.html

---

이 문제를 해결 한 또 다른 솔루션은 여기에서 찾을 수 있습니다 : https://stackoverflow.com/a/12587256/615285

거기에서 인용 :

문제는 CSS 파일의 아이콘 / 이미지가 상대 경로를 사용하고있을 가능성이 높으므로 번들이 번들로 제공되지 않는 CSS 파일과 동일한 앱 상대 경로에 있지 않으면 끊어진 링크가됩니다.

가장 쉬운 방법은 번들 경로가 css 디렉토리처럼 보이도록하는 것입니다. 따라서 상대 URL은 다음과 같이 작동합니다.

new StyleBundle("~/Static/Css/bootstrap/bundle")

1.1beta1 릴리스에서 이에 대한 지원을 추가 했으므로 이미지 URL을 자동으로 다시 작성하려면이 리베이스를 자동으로 수행하는 새 ItemTransform을 추가 할 수 있습니다.

bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
            "~/Static/Css/bootstrap/bootstrap.css",
            "~/Static/Css/bootstrap/bootstrap-padding-top.css",
            "~/Static/Css/bootstrap/bootstrap-responsive.css",
            "~/Static/Css/bootstrap/docs.css", new CssRewriteUrlTransform()));

---

나는 같은 문제가 있었다. 해결책:

1. CSS 파일을 열고 현재 글꼴 섹션을 삭제하고 다음으로 바꿉니다.

   @font-face {
   
       font-family: FontAwesome;
       src: url('/Content/fonts/fontawesome-webfont.eot'), /*for IE */
            url('/Content/fonts/fontawesomewebfont.svg'),
            url('/Content/fonts/fontawesome-webfont.ttf'); /* for CSS3 browsers */
       font-weight: normal;
       font-style: normal;
   }
   

   (원하는대로 글꼴 값 변경)

2. 바탕 화면에 ttf 글꼴 파일을 복사 한 다음 eot로 변환 하십시오.

   http://www.kirsle.net/wizards/ttf2eot.cgi

3. ttf 글꼴 파일을 svg로 변환

   http://www.freefontconverter.com/

4. ttf 글꼴 파일을 woff로 변환 (선택 사항)

   http://ttf2woff.com/

5. Visual Studio 2012가 열려있을 때 이러한 모든 글꼴 (ttf, eot, svg, woff ...)을 파일 위치로 끌어다 놓습니다.

6. 프로젝트 게시

---

다음 코드 줄에 따라 다릅니다 BundleConfig.

        BundleTable.EnableOptimizations = true;

사실이면 글꼴 파일의 경로를 변경해야합니다.

../쇼 root path, main folder of your project입니다. 그리고 나머지 경로를 작성해야합니다.

나의 것. 사실 일 때 :

font-family: 'Icons';
    src:url('../_include/css/fonts/Icons.eot');
    src:url('../_include/css/fonts/Icons.eot?#iefix') format('embedded-opentype'),
        url('../_include/css/fonts/Icons.woff') format('woff'),
        url('../_include/css/fonts/Icons.ttf') format('truetype'),
        url('../_include/css/fonts/Icons.svg#Icons') format('svg');
    font-weight: normal;
    font-style: normal;

거짓 인 경우 :

font-family: 'Icons';
    src:url('fonts/Icons.eot');
    src:url('fonts/Icons.eot?#iefix') format('embedded-opentype'),
        url('fonts/Icons.woff') format('woff'),
        url('fonts/Icons.ttf') format('truetype'),
        url('fonts/Icons.svg#Icons') format('svg');
    font-weight: normal;
    font-style: normal;

---

IIS의 MIME TYPE 문제이기도합니다. 파일 확장자 .woff 만 추가하면 작동합니다.

---

이것은 나를 위해 일했습니다 : <link href = "~ / Content / font-awesome-4.2.0 / css / font-awesome.css"rel = 'stylesheet'type = 'text / css'/>

직접 URl을 연결해야했습니다.

---

BundleConfig.cs에서 번들링이 활성화 된 내 ASP.NET MVC 프로젝트에서 작동 한 것은 다음과 같습니다.

Open the file font-awesome.css and change @font-face to this:

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot?v=3.2.1');
  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
  font-weight: normal;
  font-style: normal;
}

I had to add ../ before each url.

---

I had the same problem. Fonts were shown on local properly but when I uploded it to server, only blank squares were shown.
Sometimes it may happen because the filename mentioned in FontAwesome CSS file src attribute is different from the actual font file name. In my case I found it like this in fontawesome css file:

    @font-face {
            font-family: 'FontAwesome';
            src: url('../font/fontawesome-webfont.eot?v=3.2.1');
            src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'),
                url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'),
                url ( '../ font / fontawesome-webfont_aea8981c.ttf? v = 3.2.1') ​​형식 ( 'truetype'),
                url ( '../ font / fontawesome-webfont.svg # fontawesomeregular? v = 3.2.1') ​​format ( 'svg');
            글꼴 두께 : 보통;
            글꼴 스타일 : 보통;
        }
        

그러나 실제 글꼴 파일 이름은 다음과 같습니다.

        font / fontawesome-webfont_2d2816fe.eot
        font / fontawesome-webfont_aea8981c.eot
        font / fontawesome-webfont_aea8981c.ttf
        font / fontawesome-webfont_aea8981c.woff
        

밑줄 이후 css 파일에서 이름이 제대로 일치하지 않았지만 로컬에서는 제대로 작동했습니다. 그래서 그 원인이 무엇인지 말하기가 어려웠습니다.
FontAwesome css 파일 src의 파일 이름을 정확한 실제 이름으로 편집하면 작동했습니다.

---

Nothing realy worked for me. I have a Webform page that hosts an angulular application. The angular application uses the webfonts.

The trick with CssRewriteUrlTransform() was the right direction, but then I found this extension for bundleing that did the final solution!

AspNetBundling

You don't have to use the hole extension, just copy the CssRewriteUrlTransformFixed class and use it instead of the original.

---

I have tried all suggestions above, and none of them work. Then I tried to move font CSS file to different CSS file, and magic has happen. Everything start to work without any problems. Note you can later on bundle new CSS file through your bundle file.

ReferenceURL : https://stackoverflow.com/questions/14894935/why-font-awesome-works-on-localhost-but-not-on-web