title: Extend jQuery UI Icons with Font-Awesome
body: <p>I want a way to extend the default jQuery UI icons with Font-Awesome icons.  If possible keep the jQuery icons as a fallback, since Font-Awesome doesn't have full coverage.</p>
  
  <p>jQuery UI Example:</p>
  
  <pre><code>$("#muteAll").button({
      text: false, 
      icons: { 
          primary: "ui-icon-volume-on" 
      }
  });
  </code></pre>
  
  <p>Font-Awesome Replacement/Extended Example:</p>
  
  <pre><code>$("#muteAll").button({
      text: false, 
      icons: { 
          primary: "icon-volume-up" 
      }
  });
  </code></pre>
  
  <p>The closest I have come up with is:</p>
  
  <pre><code>.ui-icon[class*=" icon-"] {
      background: none repeat scroll 0 0 transparent;
      left: 0;
      margin-left: 1px; 
      text-indent: 0;
  }
  </code></pre>