Wie verwende ich Font Awesome-Symbole von webjars.org in einer JSF-Anwendung ohne Abhängigkeit von einem externen Server?

Verwendung von Font Awesome von webjars.org mit JSF

Einführung
Integration von Font Awesome-Symbolen in Ihr JSF Die Anwendung kann ihre visuelle Attraktivität verbessern und das Benutzererlebnis verbessern. Es ist jedoch nicht ideal, sich für diese Ressourcen auf externe Server zu verlassen. In diesem Artikel wird eine Lösung untersucht, die das Webjars-Projekt verwendet, um die erforderlichen Ressourcen in Ihrer WAR-Datei zu bündeln.

Problem
Verwendung des folgenden Codes zum Einbinden von Font Awesome:

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

führte zu fehlerhaften Symbolen und Konsolenfehlern, die darauf hinweisen, dass die Schriftarten nicht in den angegebenen Pfaden gefunden wurden:

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)
...

Lösung
Das Problem liegt in der fehlenden JSF-Zuordnung und Bibliotheksnamen in den Ressourcen-URLs. Um dieses Problem zu beheben, verwenden Sie den Ausdruck #{resource} in der CSS-Datei, um die richtigen JSF-Ressourcen-URLs zu generieren:

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

Da dies jedoch die Bearbeitung des Quellcodes erfordert, besteht eine alternative Lösung darin, die OmniFaces-Bibliothek zu verwenden UnmappedResourceHandler:

1. OmniFaces installieren (z. B. mit Maven)
2. UnmappedResourceHandler in faces-config.xml registrieren:

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

3. Hinzufügen /javax.faces.resource/* zu FacesServlet-Zuordnung:

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

4. Verschieben Sie den Bibliotheksnamen in den Ressourcennamen im tag:

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

Wenn Sie diese Schritte befolgen, sollten die Font Awesome-Symbole jetzt in Ihrer JSF-Anwendung korrekt dargestellt werden, ohne dass Sie auf externe Server angewiesen sind.

Das obige ist der detaillierte Inhalt vonWie verwende ich Font Awesome-Symbole von webjars.org in einer JSF-Anwendung ohne Abhängigkeit von einem externen Server?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!