title: How to implement JSF button with image and button label
body: <p>I want to implement JSF button with image and custom label. I tested this code:</p>
  
  <pre><code>&lt;h:commandButton id="savesettings" styleClass="avesettings" value=" Save Settings " action="#{GeneralController.updateDBSettings}" rendered="true" update="growl"&gt;
      &lt;f:ajax render="@form" execute="@form"&gt;&lt;/f:ajax&gt;
  &lt;/h:commandButton&gt;
  
  .avesettings {
      background-image: url('../images/small.png');
  }
  </code></pre>
  
  <p>This is the result:</p>
  
  <p><img src="https://i.stack.imgur.com/1Rn5F.png" alt="enter image description here"></p>
  
  <p>I also tested this second code:</p>
  
  <pre><code>&lt;h:commandButton id="savesettings" image="resources/images/first.png" value=" Save Settings " action="#{GeneralController.updateDBSettings}" rendered="true" update="growl"&gt;
      &lt;f:ajax render="@form" execute="@form"&gt;&lt;/f:ajax&gt;
  &lt;/h:commandButton&gt;
  </code></pre>
  
  <p>I get this result with no label:</p>
  
  <p><img src="https://i.stack.imgur.com/xVbgD.png" alt="enter image description here"></p>
  
  <p>Can you help me to create JSF button with background image and custom label defined as button attribute?</p>