title: Why are my text-less jquery UI buttons not square?
body: <p>I am doing the following within a jQuery-UI themed fullCalendar:</p>
  
  <pre><code>var overlay = $('&lt;div /&gt;');
     overlay.addClass(event.status);
     if(overlay.hasClass('pending')) {
        primaryIcon = 'ui-icon-check';
      } else {
        primaryIcon = 'ui-icon-cancel';
      }
      overlay.button({ icons: {
        primary: primaryIcon },
        text:false
      });
  
    overlay.css({
      'cursor': 'pointer',
      'float': 'right'
  
    });
  </code></pre>
  
  <p>But my buttons look like this - <a href="http://cl.ly/2H1j3Z3i3G34271O2E2w" rel="nofollow">http://cl.ly/2H1j3Z3i3G34271O2E2w</a></p>
  
  <p>I also tried doing it without buttons and setting '.ui-state-default .ui-icon' on a span but the background did not show up. Anyone know what might be causing this?</p>
  
  <p>I would like the buttons to be square like the first icon <a href="http://jqueryui.com/demos/button/#icons" rel="nofollow">here</a> :</p>