Change FontAwesome icon size in primefaces (p:commandButton and p:menuitem)
Solution 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>
Then, just make up your javascript like that:
<script>
$(function() {
$('.someclass').text("");
}
</script>
Solution 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"/>
Divyesh Kanzariya
Hello I am Divyesh Kanzariya from Rajkot, India. I have started a new blog related to Java Technology's. I love solving real-world problems that are challenging.
Updated on June 04, 2022Comments
-
Divyesh Kanzariya almost 2 years
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>