web-dev-qa-db-ja.com

JSFでwebjars.orgのFont Awesomeを使用する方法

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

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

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

enter image description here

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

私は webjars プロジェクトによって作成された pre-made 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"  />

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

enter image description here

また、私のブラウザー（Chrome）のコンソールに次のエラーが表示されます（無害な;を保護するためにdomain/port/context-rootが変更されました）。

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がそれを見つけるのに問題はないはずです。今、私は何をすべきかわかりません。

どんなポインタでも素晴らしいでしょう！乾杯。

cssjsfmavenfont-awesomewebjars
19
Ryan Bennetts

JSFマッピングおよびライブラリー名がこれらのURLにありません。 *.xhtmlにFacesServletをマッピングした場合、これらのURLは実際には次のようになっているはずです。

GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.woff.xhtml?ln=webjars&v=3.2.1
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.ttf.xhtml?ln=webjars&v=3.2.1
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.svg.xhtml?ln=webjars

基本的に、適切なJSFリソースURLを出力するには、CSSファイルで#{resource}を使用する必要があります。

src: url("#{resource['webjars:font-awesome/3.2.1/font/fontawesome-webfont.eot']}&v=3.2.1");
src: url("#{resource['webjars:font-awesome/3.2.1/font/fontawesome-webfont.eot']}&#iefix&v=3.2.1");

ただし、ソースコードは実際にはコントロールの外にあるため（編集することはできません）、リソースの処理を自分で管理する方法は他にありません。 JSFユーティリティライブラリ OmniFaces は、正確な目的のために UnmappedResourceHandler を提供します。次の手順で問題を解決する必要があります。

  1. OmniFacesをインストールします。Mavenでも利用できます。

    <dependency>
    <groupId>org.omnifaces</groupId>
    <artifactId>omnifaces</artifactId>
    <version><!-- Check omnifaces.org for current version. --></version>
</dependency>

  2. 次のようにUnmappedResourceHandlerをfaces-config.xmlに登録します。

    <application>
    <resource-handler>org.omnifaces.resourcehandler.UnmappedResourceHandler</resource-handler>
</application>

  3. サーブレット名がFacesServletであり、すでに/javax.faces.resource/*のマッピングがあると仮定して、*.xhtmlをfacesServletに追加します。

    <servlet-mapping>
    <servlet-name>facesServlet</servlet-name>
    <url-pattern>/javax.faces.resource/*</url-pattern>
    <url-pattern>*.xhtml</url-pattern>
</servlet-mapping>

  4. <h:outputStylesheet>ライブラリ名をリソース名に移動します。

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

  5. 利益。

28
BalusC

上記の答えは一種の時代遅れです。以前のリリースから、font-awesomeのwebjarバージョンには、cssの特定のjsf化バージョンが含まれているため、構成するものはありません。 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が何か新しいものをリリースすることに依存しません。

17
Kukeltje

BalusC回答に加えて、次のmime-mappingsを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>
7
Hatem Alimam

BalusCおよびHatem Alimamの回答に加えて、これも役立ちます追加することにより：

<context-param>
   <param-name>primefaces.FONT_AWESOME</param-name>
   <param-value>true</param-value>
</context-param>

これによると リンク

3
Danny P

Primefaces 6.2の場合、これも私にとってはうまくいきました

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

xhtmlファイル内：

<h:outputScript library="webjars" name="font-awesome/5.5.0/js/all.js"/>

webページに基づいて、使用法を4から5に、たとえばfa fa-plusからfas fa-plusに変更する必要があることに注意してください- https://fontawesome.com/icons/plus？スタイル=ソリッド

1
Betlista