19

JSF アプリケーションでFont Awesomeアイコンを使用しようとしています。開始手順に従い、ビューの<h:head>セクションに以下を追加することで、ある程度の成功を収めました。

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
      rel="stylesheet" />

icon-homeこれにより、クラスを使用するときに素敵なホーム アイコンが表示されます。

ここに画像の説明を入力

ただし、Font Awesome リソースを提供するためにブートストラップ サーバーに依存したくないので、これらを war にバンドルし、バンドルされたリソースを使用するようにビューを構成しようとしています。

webjarsプロジェクトによって作成された既製のJARを使用しています。私のpomには次の依存関係があります:

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>font-awesome</artifactId>
    <version>3.2.1</version>
</dependency>

これにより、JAR が WAR の WEB-INF/lib ディレクトリに配置されます。JAR の構造の関連部分は次のとおりです。

META-INF
  - MANIFEST.MF
  + maven
  - resources
    - webjars
      - font-awesome
        - 3.2.1
          - css
            - font-awesome.css
            - *other css files*
          - font
            - *font files*

プロジェクトにアイコンを含めるために、次のことを試しました。

<h:outputStylesheet library="webjars" 
                    name="font-awesome/3.2.1/css/font-awesome.css"  />

ただし、これにより、以前は機能していたホーム アイコンが次のようにレンダリングされます。

ここに画像の説明を入力

そして、私のブラウザ (Chrome) は、コンソールに次のエラーを表示します (ドメイン/ポート/コンテキストルートは、罪のないものを保護するために変更されました;):

GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.woff?v=3.2.1 404 (Not Found) 
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.ttf?v=3.2.1 404 (Not Found) 
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.svg 404 (Not Found)

そのため、css ファイルは正しく解決されていますが、css ファイルが参照しているフォントを含むファイルが見つからないようです。cssファイルでこれらの参照を確認しましたが、次のとおりです。

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');

これらのパスは css リソースに関連しているため、JSF は問題なく見つけることができると思いました。今、私は何をすべきかわからない。

どんな指針も素晴らしいでしょう!乾杯。

4

5 に答える 5

17

上記の答えは、時代遅れになっています。以前のいくつかのリリース以降、font-awesome の webjar バージョンには特定の jsf 化されたバージョンの css が含まれているため、構成するものは何もありません。Mavenを介してプロジェクトに jar を追加します。

<dependency>
   <groupId>org.webjars</groupId>
   <artifactId>font-awesome</artifactId>
   <version>4.6.3</version>
</dependency>

または直接、それだけで機能します。正しいcssが含まれていることを確認してください

<h:outputStylesheet library="webjars" name="font-awesome/4.6.3/css/font-awesome-jsf.css" />

名前の -jsf に注意してください!!! このようにして、アプリケーションで常に最新バージョンを使用でき、PF が何か新しいものをリリースすることに依存しません。

于 2015-02-22T00:11:21.277 に答える
7

BalusC の回答に加えて、次mime-mappingの s をweb.xml

<!-- web fonts -->
<mime-mapping>
    <extension>eot</extension>
    <mime-type>application/vnd.ms-fontobject</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>otf</extension>
    <mime-type>font/opentype</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>ttf</extension>
    <mime-type>application/x-font-ttf</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>woff</extension>
    <mime-type>application/x-font-woff</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>woff2</extension>
    <mime-type>application/x-font-woff2</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>svg</extension>
    <mime-type>image/svg+xml</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>ico</extension>
    <mime-type>image/x-icon</mime-type>
</mime-mapping>
于 2014-06-19T09:10:02.010 に答える