FontAwesome icons in the AppBar of Windows 10 Universal Apps

Question

I'm trying to set a custom icon for my Universal app's appbar. Segoe UI Symbol just doesn't have everything I'm after. I would like to use FontAwesome. Unfortunately, I can't figure out how to do that.

The only official way I can find to put custom icons into an app bar is to use PNGs, but these do not scale as well as font-awesome and are awkward to make.

The closest I've come is to create a div based element on the appbar which looks like an appbar button:

<div data-win-control="WinJS.UI.AppBarCommand" 
    data-win-options="{ id:'btnLab',label:'Lab', section:'global', type:'content'}">
    <div id="itemContainer" data-win-control="WinJS.UI.ItemContainer">
        <i class="fa fa-flask" style="color: #000; font-size: 19px; 
           padding: 10px; border: 2px solid #222; border-radius: 50%;">
        </i>
        <br/>
        <span style="color: #000; font-size: 12px;">Lab</span>
    </div>
</div>

This produces something pretty close to an appbar button, which is clickable and can be assigned a behaviour

With some tweaking I believe I could get this to look identical to a button, however I'm not confident it will scale the same way that normal app bar buttons do. Also when hovering there is this nasty border around it:

Does anyone know how I can just use font-awesome, or some other font based icon set, directly in a button?

Answer 1

I've found an answer for this - it can be done quite easily using script. I used the DOM inspector to find that the actual HTML for the button image is like so

<button class="win-disposable win-command win-global" id="cmdKey" role="menuitem" 
  aria-label="Key" type="button" data-win-options="{id:'cmdKey',label:'Key',icon:'',
  section:'global',tooltip:'testing out font-awesome'}" 
  data-win-control="WinJS.UI.AppBarCommand">
    <span tabindex="-1" class="win-commandicon win-commandring" 
     aria-hidden="true">
         <span tabindex="-1" class="win-commandimage" aria-hidden="true" 
          style="-ms-high-contrast-adjust: none;"></span>
    </span>
    <span tabindex="-1" class="win-label" aria-hidden="true">
         Key
    </span>
</button>

You can very easily target win-commandimage using either jQuery or straight JS and put a font-awesome icon directly in there

$('#cmdKey .win-commandimage').html('<i class="fa fa-key"></i>');

I find the icons a little small, but this can easily be fixed with CSS

#cmdKey .win-commandimage
{
    font-size: 20px;
}