FONT_AWESOME icon in PrimeFaces ribbon not properly displayed

Question

I am Facing a situation where each FONT_AWESOME icon is displayed at the bottom inside any action button in the Primefaces Ribbon thus hidding the tex that should be display for each button. I tried overriding using lot of messy css but, with no success

my action button code in the ribbon

<p:commandButton value="New" icon="fa fa-camera-retro fa-3x" styleClass="ui-ribbon-bigbutton myButton" type="button" />

here my custom css code

myButton{

    display: block;
}

.fa{
   vertical-align: top; 
}

I want it to be formated like this

I'm using primefaces 5.2 with glassfish 4.1

Answer 1

edited as follows:

<style type="text/css">           
        .ui-icon.fa{
           margin-top: -22px !important;
        }

    </style>

You can solve this way