PrimeFaces 功能区中的 FONT_AWESOME 图标未正确显示答案

【问题标题】：FONT_AWESOME icon in PrimeFaces ribbon not properly displayedPrimeFaces 功能区中的 FONT_AWESOME 图标未正确显示
【发布时间】：2016-01-04 01:01:38
【问题描述】：

我正面临这样一种情况，即每个 FONT_AWESOME 图标都显示在 Primefaces 功能区中任何操作按钮的底部，从而隐藏了应该为每个按钮显示的 tex。我尝试使用大量凌乱的 css 覆盖，但没有成功

我在功能区中的操作按钮代码

<p:commandButton value="New" icon="fa fa-camera-retro fa-3x" styleClass="ui-ribbon-bigbutton myButton" type="button" />

这里是我的自定义 CSS 代码

myButton{

    display: block;
}

.fa{
   vertical-align: top; 
}

我想要这样的格式

我正在使用 primefaces 5.2 和 glassfish 4.1

【问题讨论】：

标签： css jsf-2 primefaces font-awesome

【解决方案1】：

编辑如下：

<style type="text/css">           
        .ui-icon.fa{
           margin-top: -22px !important;
        }

    </style>

你可以这样解决

【讨论】：

这个答案使 all fa 图标向上移动。请为功能区提供更具体的答案
但是如果我在普通按钮或普通 div 中也使用这些呢？