Change style and icon on primefaces calendar
<p>I am trying to change the default style on primefaces calendar and tried many solution but still no idea how to change it. For example i want to change the button icon.</p>

<p>This is my calendar in my .xhtml file:</p>

<pre><code>&lt;p:calendar id="date_to"  showOn="both" value="#{WebClient.date_to}" pattern="yyyy-MM-dd HH:mm:ss"/&gt;
</code></pre>

<p>And this are  the solution that i tried so far but did not work, still the same default calendar.</p>

<p>Not working solution 1:</p>

<pre><code>.ui-icon-calendar {
    background-image: url("../images/calendar.png") !important;
    background-position: center center !important;
    width: 16px;
    height: 16px;
}
</code></pre>

<p>Not working solution 2 (using chrome and copy element class)</p>

<pre><code>.ui-button-icon-left .ui-icon .ui-icon-calendar {
        background-image: url("../images/calendar.png") !important;
        background-position: center center !important;
        width: 16px;
        height: 16px;
    }
</code></pre>

<p>Not working solution 3 (found that this is probably the button and tried to change its background)</p>

<pre><code>.ui-datepicker-buttonpane{
    background: #00CCFF !important;
}
</code></pre>

<p>If anyone has an working example how to change the default (change button icon, change colors etc) please share it with me.</p>