语义UI图标未在jsf中显示

如何解决语义UI图标未在jsf中显示

在我的Jsf页面（后端：Wildfly 19.1.0.Final）中，未显示Semantic-ui图标，只有可见的矩形而不是图标。我正在使用下载的默认版本（来自https://semantic-ui.com/introduction/getting-started.html->“下载zip”）。服务器不知何故无法加载适当的图标，但我不知道根本原因。

我的测试页（welcome.xhtml）如下：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
  <h:head>
    <f:metadata>charset=UTF-8</f:metadata>
    <title>welcome</title>
    <h:outputStylesheet name="semantic.css" library="semantic"/>
    <h:outputScript name="jquery-3.5.1.js" library="jquery"/>
    <h:outputScript name="semantic.js" library="semantic"/>
  </h:head>
  <h:body>

    <div class="ui container">
      <div id="hello" class="ui middle aligned">Hello world!</div>

      <h:form id="toLoginForm">
        <h:commandButton styleClass="ui big red button" id="toLogin" action="login" value="Login"/>
      </h:form>
      <br/>
      <div id="test" class="ui title"></div>
      <button class="ui big red button"><i class="closed captioning icon"></i> MyButton</button>

    </div>
  </h:body>
</html>

，结果是：

我的Web应用程序的目录结构：

webapp
  --resources
    ---jquery (jQuery files)
    ---js (page related js files)
    ---semantic (semantic-ui extracted files)
  --WEB-INF
-welcome.xhtml (in webapp)

web.xml是：

<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
  http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
    <servlet>
        <servlet-name>FacesServlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>FacesServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>FacesServlet</servlet-name>
        <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>FacesServlet</servlet-name>
        <url-pattern>*.jsf</url-pattern>
    </servlet-mapping>
    <welcome-file-list>
        <welcome-file>/welcome.xhtml</welcome-file>
    </welcome-file-list>
    <context-param>
        <param-name>org.omnifaces.FACES_VIEWS_SCAN_PATHS</param-name>
        <param-value>/*.xhtml</param-value>
    </context-param>
    <context-param>
        <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
        <param-value>server</param-value>
    </context-param>
    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Development</param-value>
    </context-param>
    <error-page>
        <error-code>404</error-code>
        <location>/WEB-INF/errorpages/notfound.xhtml</location>
    </error-page>
    <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>otf</extension>
        <mime-type>application/font-opentype</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>
    <mime-mapping>
        <extension>ttf</extension>
        <mime-type>application/x-font-ttf</mime-type>
    </mime-mapping>
</web-app>

我完全被困住了，有人知道我该怎么做才能使图标可见？任何帮助表示赞赏！

语义UI图标未在jsf中显示

如何解决语义UI图标未在jsf中显示

相关推荐