更改质数中的FontAwesome图标大小(p:commandButton和p:menuitem) [英] Change FontAwesome icon size in primefaces (p:commandButton and p:menuitem)

问题描述

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

I'm trying out the FontAwesome icon inside p:commandButton and p:menuitem.

我能够显示图标，但是与内置移动图标相比，FontAwesome图标似乎太小了.如果您还有其他使用themeroller图标的PF组件，则看起来不一致.

I'm able to display the icons, however compared to the built-in mobile icons, the FontAwesome icons seem too small. It looks inconsistent if you have other PF components using themeroller icons.

是否可以增加FontAwesome图标的大小?

Is there a way to increase size of the FontAwesome icons?

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

and I have also try in style to increase font-size and fa-lg, fa-2x, fa-3x, fa-4x, or fa-5x classes but doesn't work.

<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>

推荐答案

仅当不将value组件用于<p:commandButton>时，才可以使用fa-2x，fa-3x....只需将styleClass中想要描述此按钮的内容放入其中即可.

You can use fa-2x, fa-3x,... only if not use value component into <p:commandButton>. Just put into styleClass whatever you want to describe this button.

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

然后，您的XHTML生成代码:

Then, your XHTML generate code:

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

图片:

然后，像这样组成您的JavaScript:

Then, just make up your javascript like that:

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

具有常规尺寸的结果:

Result with normal-size:

fa-2x的结果:

Result with fa-2x:

这篇关于更改质数中的FontAwesome图标大小(p:commandButton和p:menuitem)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！