Switch branches/tags
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
README.md
Symbols.ttf
SymbolsWinJS.pdf

README.md

Symbols.ttf

Which symbols are included?

image image image image image

How to reference them?

There are many ways to reference icons from Symbols.ttf.

If you are using them for icons in WinJS.UI.AppBarCommand, WinJS.UI.NavBarCommand, or WinJS.UI.Command, you can simply specify the string next to each icon above as the value of the 'icon' property. For example:

    <div data-win-control="WinJS.UI.AppBar" data-win-options="{sticky: true, placement: 'top'}">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add',section:'primary',tooltip:'Add item'}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',section:'primary',tooltip:'Remove item'}"></button>
        <hr data-win-control="WinJS.UI.AppBarCommand" data-win-options="{type:'separator',section:'primary'}" />
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',section:'primary',tooltip:'Camera'}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdToggle',label:'Toggle',icon:'mappin',section:'primary', type:'toggle', tooltip:'Toggle'}"></button>
        <hr data-win-control="WinJS.UI.AppBarCommand" data-win-options="{type:'separator',section:'primary'}" />
    </div>

Notice, how these commands are configured to use the following icons: 'add', 'remove', 'camera', 'mappin', resulting in:

image

or refer to: https://github.com/winjs/winjs/blob/master/src/js/WinJS/Controls/AppBar/_Icon.js for the full list of icon strings.

If you are using the icons, in your own custom controls, here is a simple sample usage:

<div class="myIcon"></div>
.myIcon::before {
    content: "\E082";
}
.myIcon {
    font-family: "Symbols";
    font-size: 28px;
    color: #5729c1;
}

The css above requires that "Symbols" is declared, e.g.

@font-face {
  font-family: "Symbols";
  src: url(../fonts/Symbols.ttf);
}

winjs\css\ui-light.css and winjs\css\ui-dark.css already include this declaration.

output:

image

Learn more

Refer to: http://blogs.windows.com/buildingapps/2014/09/17/winjs-everywhere/