JSF搭配AdminLTE主题时Font Awesome字体图标404加载失败求助

问题根源 #

• JSF的<h:outputStylesheet>标签会自动生成带上下文路径和库参数的资源URL，规则为/[应用上下文]/javax.faces.resource/[资源名]?ln=[库名]，你此前修改的/webfonts为站点根路径，没有匹配应用上下文/WebApplication1，也不符合JSF的资源访问规则，因此仍返回404。
• 你当前页面路径为/WebApplication1/faces/template/tryout.xhtml，相对路径引用会基于/WebApplication1/faces/template/目录查找字体文件，和字体文件实际存放路径不匹配。

修复步骤 #

步骤1：确认资源目录结构 #

首先保证你的web资源目录结构符合JSF规范，如下：

src/main/webapp（或WebContent）
└── resources
    └── plugins
        └── fontawesome-free
            ├── css
            │   └── all.min.css
            └── webfonts
                ├── fa-solid-900.woff2
                ├── fa-regular-400.woff2
                ├── fa-solid-900.woff
                ├── fa-regular-400.woff
                ├── fa-solid-900.ttf
                └── fa-regular-400.ttf

步骤2：调整FontAwesome CSS引入方式 #

不要用<h:outputStylesheet>标签引入FontAwesome的CSS，改为普通link标签配合EL表达式获取应用上下文，将原引入代码：

<h:outputStylesheet library="plugins/fontawesome-free/css" name="all.min.css" />

替换为：

<link rel="stylesheet" href="#{request.contextPath}/resources/plugins/fontawesome-free/css/all.min.css" />

步骤3：还原CSS内的字体引用路径 #

把你之前修改的/webfonts路径还原为默认的../webfonts即可。此时CSS的访问路径为/WebApplication1/resources/plugins/fontawesome-free/css/all.min.css，CSS内的../webfonts/会被浏览器解析为/WebApplication1/resources/plugins/fontawesome-free/webfonts/，和字体文件实际存放路径完全匹配。

步骤4：验证生效 #

清理浏览器缓存、重启应用后再次访问页面，控制台不会再报字体文件404错误，图标可正常显示。

备选方案（如果不想修改引入方式） #

如果需要保留<h:outputStylesheet>的引入方式，可以将all.min.css内所有字体引用路径统一替换为#{request.contextPath}/resources/plugins/fontawesome-free/webfonts/，同时需要在web.xml中配置JSF处理CSS文件的EL表达式，该方案复杂度较高，优先推荐第一种修复方案。

内容的提问来源于stack exchange，提问作者Deivid Crathle