Skip to content

Latest commit

 

History

History
69 lines (49 loc) · 2.94 KB

README.md

File metadata and controls

69 lines (49 loc) · 2.94 KB
Raw

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/