Search code examples
javascriptwindows-phonewinjswindows-phone-8.1win-universal-app

Segoe UI Lock and Unlock Symbol Glyph in AppBar

I'm trying to use a glyph from the Segoe UI Symbol font for a Windows Phone 8.1 App but can't get it to work.

On this page (towards the bottom) it defines a lock and unlock glyph with the characters: U+E1f6 and U+E1f7 respectively.

This is how my appbar is defined on the page:

<div id="cmdAppbar" data-win-control="WinJS.UI.AppBar">
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdLogout',label:'Log Out',icon:'???', selection:'global',tooltip:'Log Out'}"></button>
</div>

What do I need to put into the icon declaration? Is it the icon name? or the character code? I've tried "lock" and "Lock" as the icon name and I've tried U+E1f6, UE1F6 and &E1F6;

Any ideas? I know it's probably a very simple answer but I've trawled through MSDN and can't find the correct usage.

Solution

  • You need to do it like this:

    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdLogout',label:'Log Out',icon:'&#xE1F6;', section:'global',tooltip:'Log Out'}"></button>

    The important bit is &#xE1F6;