Liferay 7中SpringMVC Portlet的Font-Awesome图标显示异常求助

结合你使用的Liferay Developer Studio 3.8、Liferay Portal 7.3.1环境，以及遇到的Font Awesome图标异常问题，咱们一步步拆解原因并给出修复方案：

首先明确一个核心前提：Liferay Portal 7.3.x 默认集成的是 Font Awesome 5，你尝试使用的v3/v4类名和v5的命名规则不兼容，这是问题的根源。另外，即使系统设置开启了Font Awesome选项，Portlet层面也需要确保资源加载或类名使用正确。

一、修复Font Awesome 4图标不显示的问题 #

Font Awesome 4的类名（比如fa fa-search）和Liferay内置的v5类名（fas fa-search）格式不同，直接套用v4类名会无法识别，你有两种解决方向：

选项1：优先使用Liferay内置的Font Awesome 5 #

直接改用v5的类名规范修改代码，这是最适配Liferay环境的方案：

<div class="input-group col-md-4">
  <input class="form-control py-2" type="search" value="search" id="example-search-input">
  <span class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">
      <i class="fas fa-search"></i>
    </button>
  </span>
</div>

• fas代表Solid风格（对应v4的fa），如果需要Regular风格图标，替换为far，具体可根据需求调整前缀。

选项2：单独引入Font Awesome 4（不推荐，易冲突） #

如果你必须使用v4，可在Portlet的JSPX中手动引入v4的CSS文件（注意避免和内置v5冲突）：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">

之后就能正常使用fa fa-search这类v4类名，但这种方式可能引发样式冲突，仅作为特殊场景的备选。

二、修复Font Awesome 3图标重复显示的问题 #

Font Awesome 3的类名（比如icon-search）和Liferay早期版本遗留的内置图标类名完全重复，Liferay 7.3依然保留了这些旧样式，导致旧图标和你引入的v3图标叠加显示。

解决方法非常直接：彻底放弃Font Awesome 3的类名，改用前面提到的v5或兼容的v4类名即可。

三、确保Portlet正确加载Font Awesome资源 #

即使系统设置开启了Font Awesome，部分场景下Portlet可能无法自动继承全局资源，你可以在liferay-portlet.xml中添加配置，强制加载内置的Font Awesome 5资源：

<portlet>
  <portlet-name>你的Portlet名称</portlet-name>
  <!-- 其他已有配置 -->
  <header-portlet-css>/o/font-awesome/css/font-awesome.min.css</header-portlet-css>
</portlet>

这个路径是Liferay内置Font Awesome 5的默认路径，能确保Portlet页面加载到正确的CSS文件。

额外排查小技巧 #

• 检查JSPX的XML规范：比如你的代码中<input>标签无需闭合（写成<input>或<input/>即可），避免XML解析错误影响样式加载。
• 用浏览器开发者工具（F12）排查：在Network标签确认Font Awesome的CSS是否成功加载，在Elements标签查看<i>元素的类名是否被正确应用、样式是否生效。

内容的提问来源于stack exchange，提问作者Yume Ishida