Home > English > Developing Windows 8 – Using AppBarCommand Icons outside the AppBar

Developing Windows 8 – Using AppBarCommand Icons outside the AppBar

One of the things I really like about developing Windows 8 applications is the ability to use the built in icons provided by the Segoe UI Symbol font.  It is through this font that I can do thing like this in my AppBar:

<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'find', label:'Find', icon:'find', section:'selection', tooltip:'Find (Ctrl+F)'}"></button>

I am able to use the name of the icon directly, “find”, because of some helpers provided by WinJS but I can still access the icons directly due to the font family being exposed.

Another nice feature is that if you create a brand new JavaScript Windows Store application, you will automatically be exposed this font.  That means that I don’t have to provide a font family directly.  You can simply write the following HTML code:

<div class="pad"><span class="marginRight10">&#xe188 ;</span>Folder</div>

NOTE:  I purposely added a space before the “;” so that the browser wouldn’t try to render representation.

The CSS for the above HTML look like the following:

.pad {
    margin:20px;
}

.marginRight10 {
    margin-right:10px;
}

Notice that the CSS was used simply for formatting purposes.  Finally the output for this little experiment looks like the following:

This is all it takes to be able to access all of the available icons provided out of the box in your AppBarCommands.  Granted that the AppBarCommands make your life a lot easier by allowing you to specify the icon by name but it is still great to access the font directly anywhere in your application.

Here is a link to the AppBarIcon enumeration.

If you are curious about finding the code to use, you can use the Character Map application in Windows 8. Simply type, “Character Map” and you can click on the application. Then simply select the “Segoe UI Symbol” font in the dropdown control.

Finally select the symbol you want and you will see the code at the bottom of the app as shown below:

The finally thing you need to do is make sure that you replace “U+” with “&#x” and you will be good to go.

Update (2/26/2013): I wanted to also document how you can do this with Knockout.js as well.

In my view model, I simply expose an observable as such:

this.icon = ko.observable("&#xe188 ;");

Again, note that a space has been intentionally added so that it would render the text and not resolve its value. Next, in my HTML, I use the following binding to get it to render properly:

<button data-bind="html: icon, click: doSomething"></button>

This gives a lot of different ways to render custom fonts in our applications.

Hope this helps…

Advertisements
  1. Will
    May 2, 2013 at 11:50 am

    Fantastic! I’ve been looking all over to find out how I can do this.
    It makes complete sense that Windows uses an icon font though, smart thinking Microsoft for embracing the new.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: