Oracle ADF 12c集成Font Awesome失败，求可行实现示例

我之前在ADF 12c里折腾Font Awesome也踩过一模一样的坑，JSF页面死活识别不了字体路径，后来摸清楚了ADF对静态资源的特殊要求，终于搞定了。给你一套亲测有效的步骤，按顺序来应该就能解决：

1. 正确放置静态资源文件 #

ADF对静态资源的存放位置有严格要求，必须放在项目的Web Content/resources目录下。你可以这么做：

• 在resources文件夹下新建一个font-awesome子文件夹
• 把Font Awesome压缩包解压后的css和fonts文件夹直接放进font-awesome里，最终结构大概是：

  Web Content
  └── resources
      └── font-awesome
          ├── css
          │   └── font-awesome.css
          └── fonts
              ├── fontawesome-webfont.eot
              ├── fontawesome-webfont.woff2
              ├── fontawesome-webfont.woff
              ├── fontawesome-webfont.ttf
              └── fontawesome-webfont.svg
  

2. 修改@font-face的路径为ADF资源引用格式 #

你原来的相对路径在ADF里不生效，必须用EL表达式#{resource['...']}来引用静态资源。打开font-awesome.css，把@font-face部分改成：

@font-face {
  font-family: 'FontAwesome';
  src: url('#{resource['font-awesome/fonts/fontawesome-webfont.eot?v=4.3.0']}');
  src: url('#{resource['font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0']}') format('embedded-opentype'),
       url('#{resource['font-awesome/fonts/fontawesome-webfont.woff2?v=4.3.0']}') format('woff2'),
       url('#{resource['font-awesome/fonts/fontawesome-webfont.woff?v=4.3.0']}') format('woff'),
       url('#{resource['font-awesome/fonts/fontawesome-webfont.ttf?v=4.3.0']}') format('truetype'),
       url('#{resource['font-awesome/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular']}') format('svg');
  font-weight: normal;
  font-style: normal;
}

注意这里的font-awesome要和你在resources下建的文件夹名完全一致。

3. 在JSF页面中引入Font Awesome CSS #

用ADF官方推荐的af:resource标签来引入CSS，确保资源能被正确加载。在你的页面的af:document标签内添加：

<af:resource type="css" source="/resources/font-awesome/css/font-awesome.css"/>

如果习惯用<link>标签，也可以这么写（效果一样）：

<link rel="stylesheet" type="text/css" href="#{resource['font-awesome/css/font-awesome.css']}"/>

4. 测试图标显示 #

现在可以在页面里添加Font Awesome图标了，比如用af:outputText组件：

<!-- 用类名方式 -->
<af:outputText styleClass="fa fa-user" style="font-size: 24px; color: #333;"/>

<!-- 或者用Unicode字符方式 -->
<af:outputText value="&#xf007;" styleClass="fa" style="font-size: 24px; color: #333;"/>

这两种方式都应该能正常显示用户图标。

常见坑点排查 #

• 缓存问题：部署后记得清空浏览器缓存，或者按Ctrl+F5强制刷新页面
• 资源部署检查：登录Web控制台，查看部署的应用里是否包含resources/font-awesome下的所有文件
• 资源处理器配置：如果还是不行，检查faces-config.xml里是否配置了正确的资源处理器，确保有这一行：

  <application>
    <resource-handler>org.apache.myfaces.trinidad.resource.ResourceHandlerImpl</resource-handler>
  </application>
  

内容的提问来源于stack exchange，提问作者mohammed elsayed