Jetty 9 FontAwesome 空图标

Question

我正在使用 Jetty 9 托管我的 Java webapp，我想自己托管 fontawesome 图标。但是我没有正确看到图标（它们是方形的。如果我从 CDN link，它工作正常

这个link有效

  <%--<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">--%>

这不是

  <link rel="stylesheet" type="text/css" href="../resources/font-awesome-4.3.0/css/font-awesome.min.css"/>

我尝试将以下内容添加到我的 web.xml

  <mime-mapping>
    <extension>otf</extension>
    <mime-type>application/x-font-opentype</mime-type>
  </mime-mapping>
  <mime-mapping>
    <extension>ttf</extension>
    <mime-type>application/x-font-truetype</mime-type>
  </mime-mapping>
  <mime-mapping>
    <extension>woff</extension>
    <mime-type>application/font-woff</mime-type>
  </mime-mapping>
  <mime-mapping>
    <extension>woff2</extension>
    <mime-type>application/octet-stream</mime-type>
  </mime-mapping>
  <mime-mapping>
    <extension>eot</extension>
    <mime-type>application/vnd.ms-fontobject</mime-type>
  </mime-mapping>
  <mime-mapping>
    <extension>svg</extension>
    <mime-type>image/svg+xml</mime-type>
  </mime-mapping>

我从 IE 得到的是以下内容

CSS3111: @font-face encountered unknown error. File:
OpenSans-Light.ttf

和Chrome

Failed to decode downloaded font:
localhost:8080/resources/theme-triton/resources/fonts/OpenSans-Light.ttf
index.jsp:1 Failed to decode downloaded font:
localhost:8080/resources/theme-triton/resources/font-awesome/fonts/fontawesome-webfont.woff2?v=4.3.0
index.jsp:1 Failed to decode downloaded font:
localhost:8080/resources/theme-triton/resources/fonts/OpenSans-Regular.ttf
index.jsp:1 Failed to decode downloaded font:
localhost:8080/resources/theme-triton/resources/fonts/OpenSans-Bold.ttf
index.jsp:1 Failed to decode downloaded font:
localhost:8080/resources/theme-triton/resources/font-awesome/fonts/fontawesome-webfont.woff?v=4.3.0
index.jsp:1 Failed to decode downloaded font:
localhost:8080/resources/theme-triton/resources/font-awesome/fonts/fontawesome-webfont.ttf?v=4.3.0
index.jsp:1 Failed to decode downloaded font:
localhost:8080/resources/font-awesome-4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0
index.jsp:1 Failed to decode downloaded font:
localhost:8080/resources/font-awesome-4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0
index.jsp:1 Failed to decode downloaded font:
localhost:8080/resources/font-awesome-4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0

回应header

HTTP/1.1 200 OK
Content-Type: application/x-font-truetype
Last-Modified: Sun, 31 May 2015 17:30:12 GMT 
Accept-Ranges: bytes
Content-Length: 359350
Server: Jetty(9.2.10.v20150310)

请求Header

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6
Cache-Control:no-cache
Connection:keep-alive
Host:localhost:8080
Pragma:no-cache
Referer:localhost:8080/wro/test.css
User-Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2418.0 Safari/537.36

谁能告诉我what/where我做错了吗？

Answer 1

尝试在@font-face { } 块本地 css 中删除 '?v=4.3.0' 后缀。

Answer 2

我没有指定我正在使用 maven 来构建我的项目。我只需要指定 maven 不应过滤的文件扩展名，否则 maven 将损坏文件。它类似于这个答案

  <plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <version>2.7</version>
    <configuration>
      <nonFilteredFileExtensions>
        <nonFilteredFileExtension>woff</nonFilteredFileExtension>
        <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
        <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
        <nonFilteredFileExtension>eot</nonFilteredFileExtension>
        <nonFilteredFileExtension>swf</nonFilteredFileExtension>
        <nonFilteredFileExtension>ico</nonFilteredFileExtension>
      </nonFilteredFileExtensions>
    </configuration>
  </plugin>

Jetty 9 FontAwesome 空图标

Jetty 9 FontAwesome Empty Icons

css

java

jetty

mime-types

font-awesome