更改 primefaces 中的 FontAwesome 图标大小（p:commandButton 和 p:menuitem）答案

【问题标题】：Change FontAwesome icon size in primefaces (p:commandButton and p:menuitem)更改 primefaces 中的 FontAwesome 图标大小（p:commandButton 和 p:menuitem）
【发布时间】：2016-05-25 11:35:05
【问题描述】：

我正在尝试 p:commandButton 和 p:menuitem 中的 FontAwesome 图标。

我可以显示图标，但是与内置的移动图标相比，FontAwesome 图标似乎太小了。如果您有其他使用主题滚轮图标的 PF 组件，它看起来会不一致。

有没有办法增加 FontAwesome 图标的大小？

我也尝试过增加字体大小和 fa-lg、fa-2x、fa-3x、fa-4x 或 fa-5x 类的样式，但不起作用。

<p:commandButton icon="ui-icon-mobile-phone" id="sendSMSBtn"
    styleClass="btn btn-info btn-lg" onclick="modalDialog.show()"
    oncomplete="modalDialog.hide();"
    action="#{myBean.getMobileNo()}"
    update=":frm:messages" style="font-size:30px">

生成的 HTML：

<button type="submit" title="Send Bulk SMS" onclick="modalDialog.show();PrimeFaces.ab({source:'frm:dataTable:sendSMSBtn',update:'frmMassSMS frm:messages',oncomplete:function(xhr,status,args){modalDialog.hide();;}});return false;" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only btn btn-info btn-lg fa-fw" name="frm:dataTable:sendSMSBtn" id="frm:dataTable:sendSMSBtn" role="button" aria-disabled="false"><span class="ui-button-icon-left ui-icon ui-c ui-icon-mobile-phone"></span><span class="ui-button-text ui-c">ui-button</span></button>

【问题讨论】：

你可以用字体大小来做。可能尝试使用 font-size:2em 等
@chanaka777 我试过了，但是没用
如果您可以粘贴 HTML 源渲染，将会很有帮助
@chanaka777 是的，我把代码放在上面

标签： css jsf primefaces font-awesome font-size

【解决方案1】：

只有在 <p:commandButton> 中不使用 value 组件时，您才能使用 fa-2x、fa-3x、...。只需在styleClass 中输入您想要描述此按钮的任何内容。

<p:commandButton styleClass="fa fa-pencil fa-2x btn btn-lg btn-success someclass" process="staffTable" update=":MStaffUpdateForm:staffUpdate" oncomplete="PF('staffUpdateDialog').show()"  />

然后，您的 XHTML 生成代码：

<span class="ui-button-text ui-c">ui-button</span>

图片：

然后，像这样组成你的javascript：

<script>
     $(function() {
         $('.someclass').text("");
     }
</script>

正常大小的结果：

fa-2x 的结果：

【讨论】：

【解决方案2】：

覆盖“ui-icon”CSS 的宽度和字体大小属性对我有用：

.button {
  width: 100px;
  height: 50px;
}

.ui-icon {
  width: 24px !important;
  font-size: 24px !important;
}

示例按钮：

<p:commandButton image="fa fa-download" value="Test" styleClass="button"/>

【讨论】：

【解决方案3】：

是的，你可以！

但如果你想使用 FA，你应该添加库的引用。我有同样的问题，我做到了：

    <!-- CSS With Font-Awesome.jar -->  
        <link href="/webjars/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet" type="text/css" media="screen"/>

一些代码：

                    <td >
                        <i class="fa fa-camera-retro"></i> fa-camera-retro              
                        <i class="fa fa-camera-retro fa-lg"></i> fa-lg
                        <i class="fa fa-camera-retro fa-2x"></i> fa-2x
                        <i class="fa fa-camera-retro fa-3x"></i> fa-3x
                        <i class="fa fa-camera-retro fa-4x"></i> fa-4x
                        <i class="fa fa-camera-retro fa-5x"></i> fa-5x
                    </td>

您也应该在 web.xml 中添加该片段：

<context-param>
    <param-name>primefaces.FONT_AWESOME</param-name>
    <param-value>true</param-value>
</context-param>

祝你好运！

【讨论】：

有人找到解决方案了吗？