JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
<h4>Replacing / Extending jQuery UI with Font Awesome</h4>

<div id="btn1" />Volume</div>
<div id="btn2" />Volume</div>
<div id="btn3" />Volume</div>
<div id="btn4" />Fighter</div>

CSS

/* Allow Font Awesome Icons in lieu of jQuery UI and only apply when using a FA icon */
.ui-icon[class*=" fa-"] {
    /* Remove the jQuery UI Icon */
    background: none repeat scroll 0 0 transparent;
    /* Remove the jQuery UI Text Indent */
    text-indent: 0; 
    /* Bump it up - jQuery UI is -8px */
    width: auto;
    height: auto;
}

.ui-button-icon-only .ui-icon[class*=" fa-"] {
    /* Bump it - jQuery UI is -8px */
    margin-left: -7px;
}

/* Allow use of icon-large to be properly aligned */
.ui-icon.icon-large {
    margin-top: -0.75em;
}

JavaScript

// jQuery UI old icon
$('#btn1').button({icons: {primary: 'ui-icon-volume-on'}});
// Font Awesome Icon
$('#btn2').button({icons: {primary: 'fa fa-volume-up'}});
// Font Awesome but BIGGER
$('#btn3').button({icons: {primary: 'fa fa-volume-up fa-lg'}});
// Font Awesome extending
$('#btn4').button({icons: {primary: 'fa fa-fighter-jet fa-lg'}});