我正在尝试 p:commandButton 和 p:menuitem 中的 FontAwesome 图标。
我可以显示图标,但是与内置的移动图标相比,FontAwesome 图标似乎太小了。如果您有其他 PF 组件使用 themeroller 图标,它看起来不一致。
有没有办法增加 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>
最佳答案
只有在不使用 value
时才可以使用 fa-2x, fa-3x,...组件进入 <p:commandButton>
.刚放入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>
关于css - 更改 primefaces 中的 FontAwesome 图标大小(p :commandButton and p:menuitem),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37435913/