Change FontAwesome icon size in primefaces (p:commandButton and p:menuitem)

问题

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

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.

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

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

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

回答1:

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()"  />

Then, your XHTML generate code:

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

image:

Then, just make up your javascript like that:

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

Result with normal-size:

Result with fa-2x:

回答2:

Overriding width and font-size properties of "ui-icon" CSS works for me:

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

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

Example button:

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

回答3:

Yes you can!

But if you want use the FA you should add a reference of library. I had the same problem and I did that:

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

Some code:

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

You should add too at web.xml that fragment:

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

Good luck!

来源：https://stackoverflow.com/questions/37435913/change-fontawesome-icon-size-in-primefaces-pcommandbutton-and-pmenuitem

标签

css

jsf

primefaces

font-awesome

font-size