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:
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:
Refer to: http://blogs.windows.com/buildingapps/2014/09/17/winjs-everywhere/